vuejs对于contenteditable="true"属性有支持吗？

vuejs对于contenteditable="true"属性有支持吗？如何对div进行v-model?

<div id='mount' contenteditable="true"
     class="form-control edit-div"
     v-model="html" >
  {{{ html }}}
</div>


new Vue({
  el: '#mount',
  data: {
    html:"<img src='http://pic.510wifi.com/2016-03/4ecdf0cbae38672b533d322edb3ef17b.jpg' />",
  },
  ready: function () {
    this.$watch('html', function (newVal, oldVal) {
      alert(newVal)
    });
})

阅读 12.3k

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .container {
            width: 960px;
            margin: 0 auto;
        }

        .editor {
            margin-right: 360px;
            border: 1px outset black;
            height: 300px;
            padding: 30px;
        }

        .preview {
            padding: 30px;
            float: right;
            width: 300px;
            border: 1px inset grey;
            height: 300px;
        }
    </style>
    <script src="http://cdn.jsdelivr.net/vue/1.0.12/vue.min.js"></script>
</head>
<body>
    <div class='container' id="editor">
        <input type="text" v-model="content" />
        <div class="preview">{{content}}</div>
        <div class='editor' v-demo="content" contenteditable="true"></div>
    </div>
    <script type="text/javascript">
        //http://vuejs.org.cn/guide/custom-directive.html
        Vue.directive('demo', {
            twoWay: true,
            bind: function () {
                this.handler = function () {
                    this.set(this.el.innerHTML)
                }.bind(this)
                this.el.addEventListener('keyup', this.handler)
            },
            update: function (newValue, oldValue) {
                this.el.innerHTML = newValue || ''
            },
            unbind: function () {
                this.el.removeEventListener('keyup', this.handler)
            }
        })

        var vm = new Vue({
            el: '#editor'
        })

    </script>
</body>

</html>

http://vuejs.org.cn/guide/custom-directi...

new Vue({ el: '#mount', data: { html:"<img src='http://pic.510wifi.com/2016-03/4ecdf0cbae38672b533d322edb3ef17b.jpg' />", }, methods: { changeData: function(event) { this.html = event.srcElement.innerHTML; } } )

<div id='mount' contenteditable="{{is_edit}}" class="form-control edit-div" v-html="html" > </div> new Vue({ el: '#mount', data: { html:"<img src='http://pic.510wifi.com/2016-03/4ecdf0cbae38672b533d322edb3ef17b.jpg' />", is_edit:'true' }, ready: function () { this.$watch('html', function (newVal, oldVal) { alert(newVal) }); })

vuejs对于contenteditable="true"属性有支持吗？

你尚未登录，登录后可以

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？

如何实现从一个div中拖拽dom到另一个div容器？

electron如何屏蔽鼠标上的前进后退快捷键？