div contenteditable 代替Textarea，做成Vue屬性動態綁定

前言

一般都是用Textarea 文本來編輯，但發現可以用 div contenteditable = “true”,這個屬性來搞定

<div contenteditable=true placeholder="添加描述符" class="shut-down"></div>

 css

.shut-down:empty:before{
    content:attr(placeholder);
    font-size: 13px;
    color: #999;
}
.shut-down:focus:before{
    content:none;

2.通過vue來實現雙向綁定

input 的實現是這樣的

input的雙向綁定

<input v-model="something">

改變的雙向綁定

<input :value="something" @input="somthing=$event.target.value"

參照上面的我們來實現div的可編輯和雙向綁定

<div contenteditable="true" v-text="content" @input="handleInput" class="shut-down">
  
</div>

js 部分

export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    handleInput($event){
      this.content = $event.target.innerText;
     
      // 拓展 如果想要只需要前100位數據
      this.content = this.content.substring(0,100)
    }
  }
}

這樣 就不用textarea 來綁定啦，H5新特性 ，完美