我想要实现input框的大小能够随内容的长度改变而改变，在尝试修改原生的input无果后，最终选择了编辑div的方法。

效果图

代码

<template> <div> 编辑区： <!-- contenteditable使div内容可编辑 --> <div ref="text" class="text" contenteditable="true"> {{initValue}} </div> <div> 监听数据变化：{{value}} </div> </div> </template> <script> export default { data () { return { initValue: '', value: '香芋炒乌蛋', } }, methods: { }, mounted () { // 设置初始值，初始值不能和value为同一个 // 因为对初始值重新赋值会使输入框的光标跑到最前面 this.initValue = this.value; // 如果不添加输入监听，那么value值不会随着内容的改变而改变 // 因为改变的是innerHTML，innerHTML是属于dom元素，vue是无法监听的 // 对text输入框添加监听输入事件，改变后对value赋值 this.$refs.text.addEventListener('input', (e) => { this.value = this.$refs.text.innerHTML; }) } } </script> <style> .text { display: inline-block; // 设置为行内元素，大小随内容改变 padding: 5px; } </style>

可以复制以上代码在这里在线vue模板进行测试

解释

contenteditable

作用：使元素内的文本可编辑，也仅仅只是可以编辑，并没有为div添加value属性，内容是以div的innerHTML显示在里面。

inline-block

设置行内元素大小随内容改变。

添加input事件监听内容变化

this.$refs.text.addEventListener('input', (e) => { this.value = this.$refs.text.innerHTML; })

添加input事件监听输入，并把内容innerHTML赋值到value中。

为什么引入initValue

vue的特性是数据驱动dom，所以在input事件触发并给value(数据)赋值时，会使div(dom)刷新，从而导致输入框的光标跑到最前面。

为什么不使用watch监听innerHTML的变化

vue的特性是数据驱动dom，重要的事情再说一遍。数据驱动dom这个作用是单向的，并没有说dom能够驱动数据。而innerHTML是dom，所以在vue中watch是不能够监听到innerHTML的变化的。

如果文章对你有帮助的话，给我点个赞吧！