<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>vue 获得当前无素并做相应处理</title>
</head>
<body>
<div id="app">
<div id='ideditdiv' contenteditable="true" @click="OngetclickElement($event)">编辑文本的DIV</div>
<p @click="OngetclickElement($event)">{{editText}}</p>
<input type="text" @change="Onchange($event)" :value="inputvalue" />
</div>
</body>
<script>
// 创建文本根 vue 实例
var vm = new Vue({
el: '#app',
data: {
editText: '不可编辑的p',
inputvalue: 'input value'
},
methods: {
// 事件函数获得当前响应事件的元素的标签名与文本
OngetclickElement(evt) {
console.log('当前元素标签：' + evt.currentTarget.nodeName)
console.log('当前元素文本：' + evt.currentTarget.innerHTML)
},
// 事件内容变化,先获得当前无素再获得新文本值
Onchange(evt) {
console.log("内容变化事件 Onchange,新文本:" + evt.currentTarget.value)
this.inputvalue = evt.currentTarget.value // 再记录新文本内容
console.log("data inputvalue = " + evt.currentTarget.value)
}
},
});
</script>
</html>