VueJs - 如何在 v-if 中使用变量？答案

【问题标题】：VueJs - How to use variable in v-if?VueJs - 如何在 v-if 中使用变量？
【发布时间】：2021-01-11 08:32:29
【问题描述】：

我是 VueJs 的新手如何在 v-if 中使用变量？？

我的 js 文件

data: {
    member: [
      {
        id:"1",
        Firstname: "Peter",
        Lastname: "Super"
      },
      {
        id:"2",
        Firstname: "Roger",
        Lastname: "Power",
      }

我的 HTML 文件

那我想这样编码。

<li v-for="member in members" v-if="members.Firstname === 'Peter'">
   //display data about id 1 Peter Super
</li>

但是是否可以在 v-if 中使用变量比如

<script>
var name = 'Peter';
</script>
<li v-for="member in members" v-if="members.Firstname === name">
   //display data about id 1 Peter Super
</li>

非常感谢

【问题讨论】：

您可以通过索引访问数组，例如members[0].Firstname。

标签： javascript vue.js

【解决方案1】：

您还需要添加key 参数。更多内容：https://vuejs.org/v2/guide/list.html

To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item:

问题还出在 v-if 中，您使用的是 members 而不是 member

请尝试以下方法：

<li v-for="member in members" :key="member.id" v-if="member.Firstname === 'Peter'">
   //it will display id 1 Peter Super
</li>

【讨论】：

【解决方案2】：

下面一行列出了名字是 Peter only 的记录。

<li v-for="member in members.find(item=>item.name == 'Peter')" >
   //display data about id 1 Peter Super
</li>

【讨论】：

【解决方案3】：

将该名称添加到您的数据对象中，然后在模板中使用find 方法检查该名称是否存在：

data: {
   name:'Peter',
    members: [
      {
        id:"1",
        Firstname: "Peter",
        Lastname: "Super"
      },
      {
        id:"2",
        Firstname: "Roger",
        Lastname: "Power",
      }

模板

<li v-if="members.find(member=>member.Firstname === name)">
   //display data about id 1 Peter Super
</li>

【讨论】：