码迷,mamicode.com
首页 > 其他好文 > 详细

vue中div模拟文本编辑器并且实现v-model功能

时间:2019-12-04 10:37:01      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:get   asc   框架   console   不能   event   mit   编辑器   data   

说明一下实现div模拟文本编辑器实现v-model数据的双向绑定而不用input的原因 因为div使用v-html绑定的数据中是可以嵌套标签的列入使用v-html进行数据的绑定自定义的标签并不会被过滤掉。

v-model 是 Vue 框架提供的众多指令中的一个,其主要作用是可以实现在表单 <input>、<textarea> 及 <select> 标签元素上创建双向数据绑定。但是当我们但是当我们使用div添加contenteditable="true"属性实现编辑的功能并不能绑定v-model实现数据的双向绑定

<body>
    <div class="" id="vue-template" >           
        <li v-for="(site, i) in testContent">
            <div class="div-editable" contenteditable="true" v-html="testContent[i]" @input="changeText(testContent[i]=$event.target.innerHTML)"></div>
        </li>
        <input>
    </div>
</body>
<script type="text/javascript"> 
//当然实现这种div模拟v-model的方法你也可以直接使用组建,组建是可以使用v-model的
var app = new Vue({
            el: '#vue-template',
            data:{
                testContent: ['dreams<span class="heightLight">qin1</span>','dreamsqin3','dreamsqin4'],
                innerText:this.testContent,
                isChange: true,
            },
            watch: {
              value() {
                  console.log(12321)
                if (this.isChange) {
                  this.innerText = this.value
                  console.log(1111)
                  console.log(this.value)
                }
              }
            },
            methods: {
              changeText(e) {
                console.log(this.testContent)
              },
              blurFunc() {
                this.isChange = true
                this.$emit('blurFunc')
              },
            },
        })
</script>
//当你输入的时候可以发现输出的结果中data的数据已经发生了改变

vue中div模拟文本编辑器并且实现v-model功能

标签:get   asc   框架   console   不能   event   mit   编辑器   data   

原文地址:https://www.cnblogs.com/wuyexuetu/p/11981211.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!