Vue中ref的使用

在jq时代,我们首要任务就是学习选择的使用,因为选择可以极其方便帮助我们获取节点查找dom,因为我们要通过dom展示处理数据。而在Vue中,我们的编程理念发生了变化,变为了数据驱动dom;但有时我们因为某些情况不得不脱离数据操作dom,因此vue为我们提供了 ref 属性获取dom节点;

<body>
    <div id="app">
        <input type="button" value="按钮" @click="get">
        <p ref="ps">211113131</p>
    </div>
</body>
   <script>
        var app=new Vue({
            el:"#app",
            methods: {
                //用来获取具有ref属性的节点对象
                get:function(){
                    alert(this.$refs.ps.innerHTML);
                }
            },
        });
   </script>

但是在项目开发中,尽可能不要使用ref,因为从一定程度上,ref 违背的mvvm设计原则;

发布了68 篇原创文章 · 获赞 32 · 访问量 14万+

猜你喜欢

转载自blog.csdn.net/Web_J/article/details/90381474