vue2.0如何动态获取元素的样式并修改

Question

我想实现一个效果就是点击一个ul中的li，某个li被点击或者鼠标移入时，他的背景会改为红色， 其他的都是蓝色，默认的也是蓝色的，但是我现在获取不到样式，用this.$refs.lis.style.cssText获取但是报错说Cannot read property 'style' of undefined，不知道问题在哪请指教。

Answer 1

首先要注意的这个ul li 是当前组件还是子组件 其次 $refs的属性是子组件

<div id="app">
    <msg ref="msg"></msg>
</div>
...

created() {
  console.log(this.$refs.msg.str) // 123
}

// 对msg 组件而言
data() {
  return {
    str: '123'
  }
}

如果你的获取没问题 注意的就是lis是不是不存在 或者lis是一个数组而不具有style属性 需要遍历

Answer 2

既然使用了vue这种数据驱动的框架，建议既不要在通过获取dom属性再去改颜色了。
完全可以绑定一个style或者class，然后匹配哪个里需要显示就可以了。类似下面的感觉

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

Answer 3

1、错误处在this.$refs.lis.style.cssText中的lis上面，lis是undefined
2、已经用了vue这种框架，最好就改变自己的思维，使用vue的方式，如上面朋友提到的：class，或者v-if或者data都可以