0
点赞
收藏
分享

微信扫一扫

vue中用$ref和$refs写出像js一样的this遍历样式

四月Ren间 2022-01-26 阅读 28

这里我们用ref和refs

先看ref和refs的用法

单个在vue中访问DOM元素节点,使用ref
    如: <p ref="one" @click = ”Mounted()“></p>

通过this.$refs.ref名 在合适的时机(事件),获取该ref名对应的DOM元素  类似于js中的getElementByID等等
    如:
    方式一://模板渲染完成后触发
        Mounted(){
            this.$refs.one.style.color="red";
        }
    方式二://页面渲染完成之后,触发的方法,此时获取DOM元素节点是可行的
        this.$nextTick(()=>{
            this.$refs.one.style.color="red";
        })

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

好,废话说多了,接下来说这个简单的需求

 

 

思路:先设置好body中的ref,然后设置事件,再通过body传来的参数i下标(点击对应的标签的下标),来传给js中的方法里,用n来遍历对象或者数组,让所有li设置原样式,最后通过传参i来设置特定样式;
 

举报

相关推荐

0 条评论