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)
    });
})

v-bind:contenteditable

or

:contenteditable

刚好我的项目也用到了这个，写一个methods,用keyup来监听

<div id='mount' contenteditable="true"
     class="form-control edit-div" @keyup="changeData($event)"
     >
  {{{ html }}}
</div>

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;
      }
   }
  )

<!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...

<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)
    });
})

【热门文章】