Vue $refs用法

昝殿慧

2021-01-20 11:19
关注

## $refs获取dom元素

今天我们主要说一下几点

1、vue 获取普通元素(基础)

2、vue 获取列表(基础)

一、vue获取dom节点 (普通元素)

我们之前获取页面上的dom元素,很容易,

比如原生js的

`document.getElementsByClassName`

jqurey的

`$('类名')`

而vue是一个MVVM框架,数据驱动,尽量能不操作dom层就不要操作,但是对于一些场景,我们不得不操作,那么怎么操作呢,其实也很简单 用ref

首先我们先将需要获取的那个元素绑定ref属性,例如input,然后我们在页面渲染完后,获取这个元素节点

```

<div>

<input type="text" value="123" ref="input">

</div>

export default {

data(){

return{

}

},

mounted() {

console.log(this.$refs.input)

打印出来的和我们原生js获取出来的一样,可以直接操作input的属性和方法

#VUE深入编程#

二、获取列表

获取列表和元素一样,同理我们在li上绑定ref

<ul >

<li v-for="(item,index) in list" :key="index" ref="list">

{{item}}

</li>

</ul>

然后在页面渲染完成后,通过this.$refs.list 获取li信息,并添加随机字体颜色

list:[1,2,4,5,6,7,8]

mounted(){

console.log(this.$refs.list)

//添加随机颜色

this.$refs.list.forEach((v)=>{

v.style.color ='#' + Math.floor(Math.random()*1000000)

})

我们看一下效果:

我把获取组件这一部分放在了下一节,子父组件之间属性和方法的操作,这样更好理解

举报/反馈