【前端热门框架【vue框架】】——条件渲染和列表渲染的学习的秒杀方式

在Vue.js中，条件渲染通常使用v-if、v-else-if和v-else指令，而列表渲染通常使用v-for指令。以下是一个简单的例子：

<template>
  <div>
    <!-- 条件渲染 -->
    <div v-if="type === 'A'">
      这是类型 A 的内容。
    </div>
    <div v-else-if="type === 'B'">
      这是类型 B 的内容。
    </div>
    <div v-else>
      这是其他类型的内容。
    </div>
 
    <!-- 列表渲染 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      type: 'A', // 可以是 'A', 'B' 或其他值来测试条件渲染
      items: ['Item 1', 'Item 2', 'Item 3'] // 列表数据
    };
  }
};
</script>

在这个例子中，v-if、v-else-if和v-else用于条件渲染，根据type数据属性的值选择性地渲染不同的内容。v-for用于列表渲染，它遍历items数组，并为数组中的每个项目创建一个li元素。注意，每个渲染的元素都绑定了:key属性，这是Vue推荐的做法，以便它可以高效地追踪每个节点的身份，特别是在动态更新时。