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

这里我们用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的一个集合；
 

好，废话说多了，接下来说这个简单的需求:点击对应的li让其更改改变颜色。

 

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

注意，使用ref的话可以直接在父组件直接调用子组件里面的方法，比如子组件里面有个show方法，父组件里面给子组件声明了个ref名如child

则可以使用：this.$refs.child.show(),直接调用子组件里面的show方法，并且可以写参数或者函数传值