【前端框架开发 | Vue.js 】Vue.js条件语句及循环语句

在Vue.js中，我们可以使用指令来实现条件性的渲染和循环语句。以下是Vue.js中条件语句和循环语句的示例代码：

<template>
  <div>
    <!-- 条件渲染 -->
    <div v-if="showMessage">Hello, Vue.js!</div>
    <div v-else>Goodbye, Vue.js!</div>
 
    <!-- 循环渲染 -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      showMessage: true,
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
    };
  },
};
</script>

在这个例子中，v-if和v-else指令用于条件渲染，而v-for指令用于基于数组中的元素进行循环渲染。:key属性是给Vue.js的虚拟DOM算法提供的提示，用于追踪每个节点的身份，从而进行高效的更新操作。