Vue.js中ref ($refs)用法举例总结及应注意的坑

JavaScript07

Vue.js中ref ($refs)用法举例总结及应注意的坑,第1张

看Vue.js文档中的ref部分,自己总结了下ref的使用方法以便后面查阅。

HTML 部分

js部分

HTML部分

JS部分

HTML部分

JS部分

HTML部分

JS部分

1、如果通过v-for 遍历想加不同的ref时记得加 : 号,即 :ref =某变量

这点和其他属性一样,如果是固定值就不需要加 : 号,如果是变量记得加 : 号

2、通过 :ref =某变量 添加ref(即加了 : 号) ,如果想获取该ref时需要加 [0] ,如 this.$refs[refsArrayItem] [0] ;如果不是 :ref =某变量 的方式而是 ref =某字符串 时则不需要加,如 this.$refs[refsArrayItem]

3、想在element ui 对话框打开后取dom时,应该使用 $nextTick ,而不是直接使用 this.$refs. imgLocal2 :

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:

<!-- vm.$refs.p will be the DOM node -->

<p ref="p">hello</p>

<!-- vm.$refs.child will be the child comp instance -->

<child-comp ref="child"></child-comp>

当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。

参考官网:网页链接

删除步骤如下:

ar arr = [ 1, 2, 3, 4, 5 ]

//原始数组

alert("原始数组:" + arr)// 1,2,3,4,5

//删除并且返回第一个元素

注:重复以上步骤即可

一、JavaScript

简称为js,一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型;

它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能;

在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。

二、js表达式:

表达式是指将常量、变量、函数、运算符和括号连接而成的式子;

根据运算结果的不同,表达式可分为算术表达式、字符表达式、和逻辑表达式。