$refs用法

最新推荐文章于 2024-09-27 18:03:53 发布

昝殿慧

最新推荐文章于 2024-09-27 18:03:53 发布

阅读量432

点赞数

分类专栏： Vue高级进阶文章标签： vue refs vue.js vue-cli3

本文链接：https://blog.csdn.net/zandianhui/article/details/112860038

版权

Vue高级进阶专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了在Vue中如何使用$refs来获取DOM元素和列表。分别展示了基础的获取普通元素和列表的方法，通过为元素绑定ref属性，然后在渲染后通过this.$refs进行操作，实现对DOM元素和列表节点的控制。

摘要由CSDN通过智能技术生成

$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的属性和方法
在这里插入图片描述

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

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

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



export  default {

data(){

return{

    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)

    })

    }

}

我们看一下效果：
在这里插入图片描述