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