javascript - 在这种情况下，v-if 的另一种解决方案是什么？

Question

我正在尝试以一种好的方式使用 v-if，但到目前为止它看起来很愚蠢。 Codepen

这是当前的一段代码，我试图根据功能的标题选择“图标”:

<v-icon v-if="item.title === 'A day' ">close</v-icon>
<v-icon v-if="item.title === 'A week' ">close</v-icon>
<v-icon v-if="item.title === 'A month' ">check_circle_outline</v-icon>
<v-icon v-if="item.title === 'Forever' ">check_circle_outline</v-icon>
new Vue({
  el: '#app',
  data () {
    return {
      menuItems:[
        {
          title: 'A day', 
          price: '$50',
          features:['Exercise','Consult','Personal meeting'],
          action: 'check_circle_outline'
        },
        {
          title: 'A week', 
          price: '$200',
          features:['Exercise','Consult','Personal meeting'],
          action: 'check_circle_outline'
        },
        {
          title: 'A month', 
          price: '$500',
          features:['Exercise','Consult','Personal meeting'],
          action: 'check_circle_outline'
        },
        {
          title: 'Forever', 
          price: '$5000',
          features:['Exercise','Consult','Personal meeting'],
          action: 'check_circle_outline'
        }
      ],
    }
  }
})

首先我尝试了这个:

<v-icon v-if="item.title === 'A day' || 'A week' ">close</v-icon>
<v-icon v-else>check_circle_outline</v-icon>

这行不通，不知道为什么。

能否请您帮助找到根据标题调整图标的正确解决方案？

Answer 1

我认为在这种情况下，条件语句在模板上会更好。如果您想进行边际优化，您可以将正则表达式拉出一个常量。

// In template
<v-icon>{{ durationText }}</v-icon>

// in component
computed: {
  durationText() {
    const dayOrWeekRegex = /(day|week)/i
    if (dayOrWeekRegex.test(this.title)) return 'close';

    return 'check_circle_outline';
  }
}