css手写文本框，大小自适应内容并监听内容，解释vue数据驱动理念

我想要实现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的变化的。

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