vue :class 获取不到 this？

Question

<li><a name="movie" class="J_Tab" :class="{selected: this.name === curTab}">影片</a></li>
<li><a name="cinema" class="J_Tab">影院</a></li>

如上代码，想判断当前 tab 栏的话，给个 class，但是报错，this 引用不到，求老司机指导下

Answer 1

这里不需要 this 直接用 name === curTab

Answer 2

直接綁個 ref 吧：

<li><a name="movie" ref="movie" class="J_Tab" :class="{selected: $refs.movie.name === curTab}">影片</a></li>
<li><a name="cinema" ref="cinema" class="J_Tab">影院</a></li>

Answer 3

我认为应该这样写 $refs 虽然可以 但是每个 li 都需要写一次

<template>
  <ul v-for="(item, index) in tabList">
    <li name="item.name" :class="item.className">{{ item.text }}</li>
  </ul>
</template>
<script lang="babel">
export default {
  data() {
    return {
      tabList: [
        { name: 'movie', className: { 'J_Tab': true, 'selected': false }, text: '影片' },
        { name: 'cinema', className: { 'J_Tab': true, 'selected': false }, text: '影院' },
      ]
    }
  },
  methods: {
    // 激活当前 tab 页
    activeCurTab() {
      // 判断当前 tab 页
      const curTab = 'movie' // 获取当前激活项，假设是这个值
      const curItem = this.tabList.find(item => item.name === curTab)
      curItem.className.selected = true // 设置激活 class
    }
  },
  created() {
    this.activeCurTab()
  },
}
</script>

Answer 4

代码贴全点，然后在看！这么少的代码改都不好改