vue-ref-$refs用法
来源:互联网 发布:云计算细分市场格局 编辑:程序博客网 时间:2024/06/05 09:46
vue $refs的基本用法
<div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button></div>
<cartcontrol :food="food" v-on:cart-add="cartAdd"></cartcontrol>
<shopcart :select-foods="selectFoods" ref="shopcart"></shopcart>
<script>new Vue({ el: "#app", methods:{ add:function(){ this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗 } },
cartAdd(el) {this.$nextTick(() => {this.$refs['shopcart'].drop(el);
this.$refs.shopcart.drop(el); // 两种写法都是ok的
// 取得ref = "shopcart"的DOM元素});}})</script>
一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值。
但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。
然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了
阅读全文
0 0
- vue-ref-$refs用法
- Vue之ref与refs的使用
- Vue $refs的基本用法
- vue中refs具体用法
- Vue $refs的基本用法
- vue $refs的基本用法
- vue $refs的基本用法
- Vue $ref用法
- vue 中 ref 的用法
- Vue.js之$refs
- vue笔记---vue1.0v-el:和v-ref用法
- 理解Vue 2.0 的ref属性及简单用法
- ref 用法
- Ref用法
- vue的ref
- vue中的ref
- vue ref scrollTop不起作用
- vue-ref使用
- 【我的Java笔记】Java反射
- nifi初识---概念 、特性、面临挑战
- 生成PKCS12证书,以及解析PKCS12证书
- (一)Charles Proxy代理使用简要介绍
- 简单的倒计时实现(拓展的知识点防止透明度继承父类)
- vue-ref-$refs用法
- 常用加密算法的Java实现总结(二)
- siebel escript入门——函数
- CSS 设置z-index无效原因
- 【如何快速的开发一个完整的iOS直播app】(采集篇)
- 递归---排列问题
- git使用详解
- java窗体简易控件的实现
- springcloud实战之8 断路器-仪表盘-单例监控(Hystrix)