Question

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

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

<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';
  }
}

Answer 2

您提到您首先尝试过此方法：

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

应该是这样：

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

Answer 3

另一种替代方法是v-switch-case指令here。

<div v-switch="item.title">
  <div v-case="'A day'">
    ...
  </div>
</div>

Answer 4

您可以尝试一下我的解决方案。我正在使用三元运算符以及像这样的小胡子语法：

  <v-icon> 
    {{
      item.title === 'A day' || item.title==='A week'?
      'close':'check_circle_outline'
    }}
  </v-icon>

这些代码替换为：

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

我已经在您的Codepen上测试了此解决方案，并且按预期工作。希望您会喜欢。顺便说一句，顺便说一句。

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

4 个答案: