contentEditable属性

我们最常用的输入文本内容便是input与textarea，但是有一个属性，可以让我们在很多标签中，如div,table,p,span,body等，可以像input输入框一样，实现文本编辑，这便是contentEditable属性

 

 

之前有用到这个属性是在写原生table里面 用到了 

该属性的功能是允许用户编辑元素中的内容//所以这个元素必须是可以获得鼠标焦点的元素，并且在点击鼠标后要向用户提供一个插入符号，提示可编辑

contenteditable=“true”            #开启文本编辑

contenteditable=“false”          #关闭文本编辑，该字段的值缺失时，效果和这个是一样的

contenteditable=“inherit”  #(默认）表明该元素继承了其父元素的可编辑状态

mdn

使用：

<div class="count">

  <div contenteditable="true"

      v-for="(n, index) in list" :key="n"

      @blur="handleBlur(index, $event)">{{n}}</div>

</div>

export default {

  data() {

   return {

     list: ['这是1', '这是2', '这是3']

   };

  },

  methods: {

   handleBlur(index, event) {

     this.$set(this.list, index, event.target.innerText);

        console.log(this.list);

     },

   },

};