vue $refs的基本用法

本文介绍如何在Vue.js中利用$refs特性来简化DOM元素的操作过程,通过实例展示了使用$refs直接访问DOM元素的方法,从而避免了传统方式下频繁获取DOM节点所带来的性能开销。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<div id="app">
    <input type="text" ref="inpt"/>
    <button @click="add">文本</button>

</div>

<script>

new Vue({

        el: "#app",
        methods:{
        add:function(){
            this.$refs.inpt.value ="绑定了"; //this.$refs.inpt
            }
        }
    })

</script>

一般来讲,获取DOM元素

需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值。

但是用ref绑定之后,我们就不需要在获取dom节点了

直接在上面的input上绑定input1,然后$refs里面调用就行。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值