Javascript 用于显示和隐藏div的Vue动态V型

我想显示一个div，并在单击它时隐藏另一个div。 但是发生的事情是：我有一个用户列表，每个用户的名字旁边都有一个图标。单击一个图标会为每个用户更改它（因为单击一个图标会隐藏它并显示另一个图标）。 那么，我该如何区分它们呢？ 信息：我的控制台日志可以显示不同的用户，但是如何区分v-show指令呢

    <template>
  <span>
    <span class="userListContent" v-for="user in this.userResults" :key="user.id">
      <a :href="'/profile/'+user.id" target="blank">{{user.name}}</a>
      <i v-show="visibleBefore" @click="visibleAfter = true" class="far fa-plus"></i>
      <i v-show="visibleAfter" class="far fa-check-circle"></i>
      <input type="checkbox" />
    </span>
  </span>
</template>

<script>
export default {
  props: ["userResults"],
  data: function() {
    return {
        visibleBefore: true,
        visibleAfter: false
    };
  },
  methods: {
    change(user) {
      console.log(user);
      //   this.visibleBefore = false;
      //   this.visibleAfter = true;
    }
  }
};
</script>

<style>
</style>

导出默认值{
道具：[“用户结果”]，
数据：函数（）{
返回{
visibleBefore:对，
visibleAfter:错误
};
},
方法：{
更改（用户）{
console.log（用户）；
//this.visibleBefore=false；
//this.visibleAfter=true；
}
}
};

我还尝试在数据函数中使用一个用户对象，但这似乎是完全错误的。 提前感谢

请尝试以下代码：

<template>
  <div>
    <div v-for="user in users" :key="user.id">
      {{user.name}}
      <template v-if="user.visible">
        <button @click="onClick(user.id)">Show</button>
        {{user.email}}
      </template>
      <template v-if="! user.visible">
        <button @click="onClick(user.id)">Hide</button>
        {{user.phonr}}
      </template>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClick(id) {
      this.users.map(user => {
        if(id = user.id) {
          user.visible = !!! user.visible
        }
      })
    },
  }
}
</script>

{{user.name}
显示
{{user.email}
隐藏
{{user.phonr}
导出默认值{
方法：{
onClick（id）{
this.users.map（user=>{
if（id=user.id）{
user.visible=！！！user.visible
}
})
},
}
}

您需要将

可见功能

放入数据库中，或者您可以将其作为另一个字段推送到

数据对象中。然后您可以切换可见的
尝试以下代码：

<template>
  <div>
    <div v-for="user in users" :key="user.id">
      {{user.name}}
      <template v-if="user.visible">
        <button @click="onClick(user.id)">Show</button>
        {{user.email}}
      </template>
      <template v-if="! user.visible">
        <button @click="onClick(user.id)">Hide</button>
        {{user.phonr}}
      </template>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClick(id) {
      this.users.map(user => {
        if(id = user.id) {
          user.visible = !!! user.visible
        }
      })
    },
  }
}
</script>


{{user.name}
显示
{{user.email}
隐藏
{{user.phonr}
导出默认值{
方法：{
onClick（id）{
this.users.map（user=>{
if（id=user.id）{
user.visible=！！！user.visible
}
})
},
}
}

您需要将
可见功能
放入数据库中，或者您可以将其作为另一个字段推送到
数据对象中。然后您可以切换可见的
您可以在v-for中使用v-if
答案@code for money gived很好，但他可以使用v-else而不是写两次v-if

v-if="user.visible"
v-else

查看“它解释了所有可能性”
您可以在v-for中使用v-if
答案@code for money gived很好，但他可以使用v-else而不是写两次v-if

v-if="user.visible"
v-else

查看“it解释所有可能性”
最好的方法是创建一个
UserListItem
组件，将用户作为道具接收：

<template v-for="user in this.userResults" :key="user.id">
  <user-list-item :user="user"/>
</template>

最好的方法是创建一个
UserListItem
组件，将用户作为道具接收：

<template v-for="user in this.userResults" :key="user.id">
  <user-list-item :user="user"/>
</template>


{{user.name}
显示
{{user.email}
隐藏
{{user.phone}
导出默认值{
方法：{
onClick（id，sts）{
如果（sts==‘显示’）{
this.$refs['div-'+id][0]。子项[0]。hidden=false；
this.$refs['div-'+id][0]。子项[1]。hidden=true；
this.$refs['div-'+id][0]。子项[2]。hidden=false；
}
否则{
this.$refs['div-'+id][0]。子项[0]。hidden=true；
this.$refs['div-'+id][0]。子项[1]。hidden=false；
this.$refs['div-'+id][0]。子项[2]。hidden=true；
}
console.log（this.$refs['div-'+id]）；//您可以在这里找到所有元素
},
}
}

{{user.name}
显示
{{user.email}
隐藏
{{user.phone}
导出默认值{
方法：{
onClick（id，sts）{
如果（sts==‘显示’）{
this.$refs['div-'+id][0]。子项[0]。hidden=false；
this.$refs['div-'+id][0]。子项[1]。hidden=true；
this.$refs['div-'+id][0]。子项[2]。hidden=false；
}
否则{
this.$refs['div-'+id][0]。子项[0]。hidden=true；
this.$refs['div-'+id][0]。子项[1]。hidden=false；
this.$refs['div-'+id][0]。子项[2]。hidden=true；
}
console.log（this.$refs['div-'+id]）；//您可以在这里找到所有元素
},
}
}
用户
是一个道具，它不应该被修改，这样做是一种不好的做法，而且他只想切换一个图标，而不是删除用户。上面的代码不会修改对象的状态，但只更改visible的属性。此外，它还访问
props
属性。没错，如果您只修改属性，那么组件将不会呈现该更改。它将保留旧值。@Edercrono问题是我只更改
DOM
而不是变量的实际状态。因此，如果
visible=true
的值，那么我通过方法将其更改为
false
，但当您刷新时，它将返回其原始值
users
是一个道具，它不应该被变异，这样做是一种不好的做法，而且他只想切换一个图标，不删除用户上述代码不改变对象的状态，只改变vissible的属性。此外，它还访问
props
属性。没错，如果您只修改属性，那么组件将不会呈现该更改。它将保留旧值。@Edercrono问题是我只更改
DOM
而不是变量的实际状态。因此，如果
visible=true
的值，那么我通过方法将其更改为
false
，但当您刷新时，它将返回到其原始值