求vue的一个简单写法

Question

标题前面的小图标是用CSS来控制显示的

<span :class="item.status == 'hidden' ? 'status_logo' :'title'">
    <router-link :to="{name:'jobs',params:{id:item.id}}">{{item.title}}</router-link>
</span>

假如我这里
:class="item.status == 'hidden' ? 'status_logo' :'title'"
还有其他的控制条件来判断显示更多的图标？怎么写？
:class="item.status == 'hidden' ? 'status_logo' :'title' item.flag == 'hidden' ? 'status_logo' :'title'"
这样写，提示错误

Answer 1

不用三目运算，用对象的语法会清晰点

<span class="title" :class="{status_logo:item.status == 'hidden',status_logo:item.status != 'hidden'}">
    <router-link :to="{name:'jobs',params:{id:item.id}}">{{item.title}}</router-link>
</span>

或者可以提前将css样式写在item的对象里面就不用写这么多判断了

<span :style="item.style">
    <router-link :to="{name:'jobs',params:{id:item.id}}">{{item.title}}</router-link>
</span>

Answer 2

一两个条件写到模版里，多了还是用 computed 比较好。比如：

export default {
  computed: {
    itemClass() {
      if (item.status == 'hidden') {
        return 'status_logo';
      }
      // ...其它图标
    }
  }
}

Answer 3

这个需求更适合用插槽
https://cn.vuejs.org/v2/guide...

Answer 4

:class="${item.status == 'hidden' ? 'status_logo' :'title'} ${item.flag == 'hidden' ? 'status_logo' :'title'}"
反斜线渲染不出来