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

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

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

<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'
        }
      ],
    }
  }
})

关闭
关闭
检查圆的轮廓
检查圆的轮廓
新Vue({
el:“#应用程序”，
数据（）{
返回{
菜单项：[
{
标题：“一天”，
价格：‘$50’，
特点：[“练习”、“咨询”、“私人会议”]，
行动：“检查圆和轮廓”
},
{
标题：“一周”，
价格:"200元",，
特点：[“练习”、“咨询”、“私人会议”]，
行动：“检查圆和轮廓”
},
{
标题：“一个月”，
价格：‘$500’，
特点：[“练习”、“咨询”、“私人会议”]，
行动：“检查圆和轮廓”
},
{
标题:"永远",，
价格：‘$5000’，
特点：[“练习”、“咨询”、“私人会议”]，
行动：“检查圆和轮廓”
}
],
}
}
})

首先，我尝试了这个：

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

关闭
检查圆的轮廓

这不管用，不知道为什么

---

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

我认为在这种情况下，模板上的条件会更好。如果您想稍微优化，可以将正则表达式拉到一个常量

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

//在模板中
{{durationText}}
//组件中
计算：{
持续时间文本（）{
常数dayOrWeekRegex=/（日|周）/i
如果（dayOrWeekRegex.test（本标题））返回“关闭”；
返回“检查圆和轮廓”；
}
}

您提到您第一次尝试以下方法：

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

关闭
检查圆的轮廓

您可以试试我的解决方案。我在使用三元运算符的同时还使用了如下的mustache语法：

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

{{
item.title==“一天”| item.title==“一周”？
“关闭”：“检查圆和轮廓”
}}

这些代码替换为：

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

关闭
关闭
检查圆的轮廓
检查圆的轮廓

---

我已经在你的代码笔上测试了这个解决方案，它的效果和预期的一样。希望你会喜欢。由于其简单性，顺便说一句，另一个替代方案是

v-switch-case

指令

...

item.title=='A day'| | item.title=='A week'您的数据中可以有一个id/名称，它对应于一个小写的非空格字符，如week、month等，并将其视为带有span的类名包装v形图标，例如：

close

@yxf why？我看不出有什么改进是的，这应该是处理OP问题的正确方法

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