基础的模板语法v-if v-show v-for

v-if：根据表达式的值的真假来决定是否渲染元素，如果为真则渲染，否则不渲染。

<template>
  <div>
    <p v-if="show">这是一个可以被控制显示的元素</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

v-show：根据表达式的值的真假来决定是否显示元素，如果为真则显示，否则隐藏。与 v-if 不同的是，v-show 只是将元素的 display 样式设置为 none，而不是将元素从 DOM 树中移除。

<template>
  <div>
    <p v-show="show">这是一个可以被控制显示的元素</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

v-for：根据给定的数组或对象的值，循环渲染元素。可以使用类似于 v-for="(item, index) in list" 的语法来获取数组或对象中的每个元素的值和索引。

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

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange']
    }
  }
}
</script>