Vue3 循环语句学习笔记

在Vue3中，循环语句是实现动态渲染的重要手段。本文将介绍Vue3中三种常见的循环语句及其用法。

v-for指令

v-for指令可以用来循环遍历数组和对象，并将每个元素渲染到模板中。其基本语法为：

htmlCopy Code
<div v-for="(item, index) in items" :key="index">
  {{ item }}
</div>

上述代码中，items表示被循环遍历的数组或对象，item表示当前迭代的值，index表示当前迭代的下标。:key属性是必需的，用于为每个项提供唯一的标识。

以下是一个示例，用于展示如何使用v-for渲染一个简单的列表：

htmlCopy Code
<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange']
    }
  }
}
</script>

v-if指令

v-if指令可以用来根据条件来渲染模板。其基本语法为：

htmlCopy Code
<div v-if="condition"></div>

上述代码中，condition表示条件表达式，如果该表达式为真，则该元素会被渲染到模板中，否则不会。

以下是一个示例，用于展示如何使用v-if指令在列表中过滤元素：

htmlCopy Code
<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index" v-if="item.type === 'vegetable'">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Carrot', type: 'vegetable' },
        { name: 'Apple', type: 'fruit' },
        { name: 'Tomato', type: 'vegetable' },
        { name: 'Banana', type: 'fruit' }
      ]
    }
  }
}
</script>

v-show指令

v-show指令与v-if指令类似，也可以根据条件来控制元素的显示和隐藏。其基本语法为：

htmlCopy Code
<div v-show="condition"></div>

上述代码中，condition表示条件表达式，如果该表达式为真，则该元素会被显示，否则会被隐藏。

与v-if指令不同的是，v-show指令不会销毁和重新创建元素，而是通过设置display属性来实现显示和隐藏。

以下是一个示例，用于展示如何使用v-show指令在列表中切换元素的显示状态：

htmlCopy Code
<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <div v-show="item.show">{{ item.name }}</div>
        <button @click="toggleShow(index)">{{ item.show ? 'Hide' : 'Show' }}</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Apple', show: true },
        { name: 'Banana', show: true },
        { name: 'Orange', show: true }
      ]
    }
  },
  methods: {
    toggleShow(index) {
      this.items[index].show = !this.items[index].show
    }
  }
}
</script>

以上就是Vue3中循环语句的使用方法及示例。希望能对您学习Vue3有所帮助。