本文标签： contenteditable vue.js web前端 前端
晒demo代码：
<!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-divmodel="content" contenteditable="true"></div>
</div>
<script type="text/javascript">
Vue.directive('divmodel', { //注意不可写成驼峰的divModel
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>
声明: 本文由( zongyan86 )原创编译，转载请保留链接: vue系列教程:3.vue.js实现可编辑的div
