vue in the $ refs Detailed

Generally conventional operation is acquired DOM getElementById ( "# id"), but not recommended for direct operation vue DOM node, by setting the ref attribute inside the element, DOM node to obtain specific details code is as follows:
the HTML:

<div id="app">
  <input type="text" ref="ipt1"/>
  <button @click="add">添加</button>
</div>

JS:

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    //this.$refs.ipt1 减少获取dom节点的消耗,获取DOM节点
    this.$refs.ipt1.value ="我是新添加的数据";
    }
  }
})
</script>

Conclusion:
. $ Refs.ipt1 can get us to specify ref = "ipt1" DOM node through this, then you can DOM node, to operate the

Published 49 original articles · won praise 32 · views 2475

Guess you like

Origin blog.csdn.net/qq_43255017/article/details/101675317