求vue的一个简单写法

Z时代
2024-02-16
分类：IT

求vue的一个简单写法
标题前面的小图标是用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'"
这样写，提示错误

回答：

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

<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>

回答：

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

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