v-for-v-show的区别

v-for和v-show是Vue.js中常用的指令，用于控制元素的显示和隐藏。它们之间有以下区别：

1. 功能不同：v-for用于循环渲染元素列表，而v-show用于根据条件控制元素的显示和隐藏。

2. 使用场景不同：v-for适用于需要根据数据动态生成多个相同结构的元素，例如列表渲染。v-show适用于需要根据条件动态显示或隐藏单个元素，例如根据用户的登录状态显示不同的内容。

3. 渲染方式不同：v-for会根据数据的长度循环渲染多个元素，每个元素都会生成一个唯一的key值。v-show只是通过控制元素的display属性来实现显示和隐藏，不会改变DOM结构。

4. 性能不同：由于v-for需要循环渲染多个元素，当数据量较大时，可能会影响性能。而v-show只是通过控制CSS来显示或隐藏元素，性能相对较好。

下面是一个示例，演示了v-for和v-show的区别：

<template>
  <div>
    <button @click="toggleShow">Toggle Show</button>
    <ul>
      <li v-for="item in list" :key="item.id" v-show="show">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      show: true
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    }
  }
};
</script>

在上面的示例中，点击"Toggle Show"按钮可以切换列表的显示和隐藏。使用v-for循环渲染了三个li元素，每个元素都有一个唯一的key值。通过v-show控制元素的显示和隐藏。