vue3条件渲染与列表渲染

条件渲染

在Vue 3中，条件渲染可以通过使用v-if、v-else-if和v-else指令来实现。这些指令可以直接放在元素上，根据表达式的值来决定是否渲染该元素。

v-if=“表达式/数据” 数据为true则当前元素会渲染进入dom树
v-else 自动和前一个v-if做取反操作

v-show=“” 数据为true元素则展示在页面上，否则不展示

v-if 数据为false时，元素则不在dom树中了
v-show数据是false时，元素仍在dom树中，通过display的none来控制元素隐藏

<template>
  <div>
    <p v-if="isTrue">条件为真时显示的内容</p>
    <p v-else-if="isFalse">条件为假时显示的内容</p>
    <p v-else>其他情况下显示的内容</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isTrue = ref(true);
    const isFalse = ref(false);

    return { isTrue, isFalse };
  }
};
</script>

列表渲染

在Vue 3中，可以使用v-for指令来进行列表渲染。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]);

    return {
      items
    };
  }
};
</script>