html:
        <div id="app">
            <div ref = "box">{{msg}}</div>
            <button @click="change">点我改变msg的值</button>
        </div>
js:
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                msg:'hello'
            },
            methods:{
                change(){
                    this.$refs.box.innerHTML = "hello world"     
                    //好处:this.$refs 可减少获取dom节点的消耗了
                    //一般来讲,获取DOM元素,需document.querySelector(".box")获取这个dom节点,然后再获取元素的值。
                    //但是用ref绑定之后,就不需要再获取dom节点了,在js里面直接this.$refs.box里调用就行。
                }
            }    
        })
    </script>
 

Logo

前往低代码交流专区

更多推荐