vue中$refs的用法及作用

一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值。

但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。

然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了

用法如下:

HTML:

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

JS:

<script>
new Vue({
    el: "#app",
    methods:{
    add:function(){
        this.$refs.input1.value ="test"; //this.$refs.input1  减少获取dom节点的消耗
        }
    }
})
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,464评论 0 21
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,401评论 19 139
  • Spring Espresdsion Language Spring表达式语言(简称SpEL)是一个支持查询并在运...
    程序员小韩阅读 847评论 0 0
  • 阅读本质上是一种跨时空的交流。因为阅读,才能够和逝去的人对话,哪怕已沉睡几千年。同样,因为阅读,才能够和不在...
    SS中阅读 595评论 4 13
  • 生产力先进,直接表现就是生产效率高,财富多。 现今代表着最高效率的生产力,就是西方资本家的吸金大法...
    红炉_9efb阅读 675评论 0 1

友情链接更多精彩内容