VUE课程---22、ref获取dom
一、总结
一句话总结：
vue中不推荐操作dom，vue操作dom的话可以用vue的$ref属性，例如this.$refs.msg获取ref="msg"的元素
<div id="app"> <p ref="msg">{{msg}}</p> <button @click="getElement">获取p标签</button> </div> <script src="../js/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { msg: '我有一只小毛驴，我永远也不骑' }, methods:{ getElement:function () { // 通过 this.$refs 来获取元素 //console.log(this.$refs.msg);//获取p标签 //console.log(this.$refs.msg.innerHTML);//获取innerHTML console.log(this.$refs.msg.innerHTML='左手画龙，右手画彩虹');//设置html } } }); console.log(vm); </script>
二、ref获取dom
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ref获取dom</title> 6 </head> 7 <body> 8 <!-- 9 10 vue中不推荐操作dom，vue操作dom的话可以用vue的$ref属性，例如this.$refs.msg获取ref="msg"的元素 11 12 --> 13 <div id="app"> 14 <p ref="msg">{{msg}}</p> 15 <button @click="getElement">获取p标签</button> 16 </div> 17 <script src="../js/vue.js"></script> 18 <script> 19 let vm = new Vue({ 20 el: '#app', 21 data: { 22 msg: '我有一只小毛驴，我永远也不骑' 23 }, 24 methods:{ 25 getElement:function () { 26 // 通过 this.$refs 来获取元素 27 //console.log(this.$refs.msg);//获取p标签 28 //console.log(this.$refs.msg.innerHTML);//获取innerHTML 29 console.log(this.$refs.msg.innerHTML='左手画龙，右手画彩虹');//设置html 30 } 31 } 32 }); 33 console.log(vm); 34 </script> 35 </body> 36 </html>
