Vue $refs用法（vue $refs $el 用法）

ztj100 2024-11-02 14:31 13 浏览 0 评论

$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)

    })

    }

}

我们看一下效果：

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

vue获取dom节点

上一篇：一万字助你彻彻底底弄清vue的双向绑定和链路追踪
下一篇：史上最强vue总结，面试开发全靠它了

Vue $refs用法（vue $refs $el 用法）

相关推荐

取消回复欢迎你发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何快速切换node版本?利用n包快速切换nodejs版本

如何发个 npm 包?

详解MySQL 字符串拼接之concat\concat_ws\group_concat

让Jenkins自动部署你的Vue项目「实践」

Vue $refs用法（vue $refs $el 用法）

相关推荐

取消回复欢迎 你 发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何快速切换node版本?利用n包快速切换nodejs版本

如何发个 npm 包?

详解MySQL 字符串拼接之concat\concat_ws\group_concat

让Jenkins自动部署你的Vue项目「实践」

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起