微信扫一扫打赏支持

VUE课程---22、ref获取dom

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>

 

 

 

 

 
posted @ 2020-04-22 07:13  范仁义  阅读(264)  评论(0)    收藏  举报