Vue $refs的基本用法
html: <div id="app"> <div ref = "box">{{msg}}</div> <button @click="change">点我改变msg的值
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>
更多推荐
所有评论(0)