Question

我想切换topic.text属性。我想交替崩溃和展开。

我有以下设置：

<template v-for="topic in $store.state.forum.topics">
  <div class="topic">
    <div class="date">{{ topic.user }}, {{ topic.date }}</div>
    <span class="title">{{ topic.title }}</span>
    <div class="text">{{ topic.text }}</div>
  </div>
</template>

Answer 1

您可以执行以下操作：

<template v-for="topic in $store.state.forum.topics">
  <div class="topic" @click="toggleCollapsation">
    <div class="date">{{ topic.user }}, {{ topic.date }}</div>
    <span class="title">{{ topic.title }}</span>
    <div class="text" v-show="isCollapsed">{{ topic.text }}</div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isCollapsed: false
      };
    },
    methods: {
      toggleCollapsation() {
        this.isCollapsed = !this.isCollapsed;
      }
    }
  };
</script>

您也可以使用v-if代替v-show。差异是（来自官方文档）：

v-if vs v-show

v-if是“真正的”条件渲染，因为它确保了该事件   条件块内的侦听器和子组件是   在切换期间正确销毁并重新创建。

v-if也很懒：   如果在初始渲染时条件为假，它将不会执行任何操作 -   在条件变为条件之前，不会呈现条件块   这是第一次。

相比之下，v-show更简单 -   无论初始条件如何，始终都会呈现元素   简单的基于CSS的切换。

一般来说，v-if有更高的切换   v-show具有较高的初始渲染成本。所以更喜欢v-show   如果你需要经常切换一些东西，并且喜欢v-if if if   条件不太可能在运行时改变。

https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

我不会直接从$ store global读取主题。假设你正在使用VueX，我会在父视图中使用mapGetters，并通过props提供主题的组件。

对于添加糖，您可以查看Vue过渡：https://vuejs.org/v2/guide/transitions.html

VueJS：如何单独折叠For循环中的元素？

1 个答案: