Question

当我单击它时，我想显示一个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>

我也试图在数据函数中有一个用户对象，但这似乎是完全错误的。预先感谢

Answer 1

尝试此代码：

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

您需要将visible function放入数据库中，也可以将其作为另一个字段放入data object中。然后，您可以切换visible。

Answer 2

您可以在v-for中使用v-if @ code-for-money给出的答案很好，但是他可以使用v-else而不是两次编写v-if。

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

查看documentation，它说明了所有可能性

Answer 3

最好的方法是创建一个System.Text.Json组件来接收用户作为道具：

UserListItem

然后在内部，您可以使用<template v-for="user in this.userResults" :key="user.id"> <user-list-item :user="user"/> </template>来切换图标，如下所示：

boolean

Answer 4

<template>
  <div>
    <!-- parent[0] -->
    <div v-for="user in users" :key="user.id" :ref="`div-${user.id}`">
      <!-- children[0] -->
      <div>
        {{user.name}}
      </div>

      <!-- children[1] -->
      <div> 
        <button @click="onClick(user.id, 'show')">Show</button>
        {{user.email}}
      </div>

      <!-- children[2] -->
      <div>
        <button @click="onClick(user.id, 'hide')">Hide</button>
        {{user.phone}}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    onClick(id, sts) {
      if(sts == 'show'){
        this.$refs['div-'+id][0].children[0].hidden = false;
        this.$refs['div-'+id][0].children[1].hidden = true;
        this.$refs['div-'+id][0].children[2].hidden = false; 
      }
      else {
        this.$refs['div-'+id][0].children[0].hidden = true;
        this.$refs['div-'+id][0].children[1].hidden = false;
        this.$refs['div-'+id][0].children[2].hidden = true; 
      }

      console.log(this.$refs['div-'+id]); // You can find all element here
    },
  }
}
</script>

Vue动态V-用于显示和隐藏div

4 个答案: