## $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)
})
我们看一下效果:
我把获取组件这一部分放在了下一节,子父组件之间属性和方法的操作,这样更好理解
举报/反馈

昝殿慧

8获赞 19粉丝
时间顺流而下,生活逆水行舟。
关注
0
0
收藏
分享