$refs的用法及作用

时间：2022-07-31 16:26:05

获取DOM元素，一般用document.querySelector获取这个dom节点，然后在获取input的值

但是用ref绑定之后，就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用即可

this.$refs.input1  这样可以减少获取DOM节点的消耗

<div id="app">

    <input type="text" ref="input1"/>

    <button @click="add">添加</button>

</div>
new Vue({

    el: "#app",

    methods:{

    add:function(){

         //this.$refs.input1  减少获取dom节点的消耗

        this.$refs.input1.value ="996";

        }

    }

})

随机推荐

  1. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...

  2. 浅析Java中的final关键字

    浅析Java中的final关键字 谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来 ...

  3. linux -- nano

    今天在git commit的时候碰到了一种编辑方式 -- 不会用 T.T,然后找了下相关的文档. ^G -- ctrl+g 帮助文档 ^O -- ctrl+o 写出,会出现下面的一行提示,是否保存,直 ...

  4. IOS JSON

    //请求数据 dispatch_async(dispatch_get_global_queue(, ), ^{ _dataArray=[NSMutableArray array]; NSString ...

  5. oracle中的自动增长

    create table test( id int not null primary key, name varchar2(20), sex int) ; create sequence t -&gt ...

  6. 带百分号的数据转json

    今天处理前后数据传输的时候遇到了问题. 前台拼参数是这样写的 '&rowData=' + JSON.stringify(rowData); 后台解析出的对象却总是null,而且没有抛Parse ...

  7. java&lowbar;设计模式&lowbar;工厂模式&lowbar;Factory Pattern（2016-08-04）

    工厂模式主要是为创建对象提供了接口.工厂模式按照<Java与模式>中的提法分为三类: (1)简单工厂(Simple Factory)模式,又称静态工厂方法模式(Static Factory ...

  8. Dev中GridControl的GridView 基本样式设置

    基本样式图: 代码如下: /// <summary> /// gridView样式 /// </summary> /// <param name="gdv&qu ...

  9. UWP 使用Telerik Chart控件

    Telerik开发的chart功能异常强大 用户可以自行在商店搜索"UI for uwp demos". 下面我就结合以下我的软件,来说明一下饼状图的实现. 看看效果: 先看一下X ...

  10. IPD咨询如何才能真正落地？

    文/资深顾问 杨学明 IPD作为先进的产品开发理念,思想起源于PRTM公司,PACE,培思的力量,首先在IBM和波音公司迅速完善,中国是深圳华为公司. 1992年IBM公司利润停止增长,财务困难,IB ...

相关文章