基础/列表渲染

v-for

在 script setup 中声明的变量或方法，在 app.vue 的 template 部分都是可以使用的

<!-- app.vue -->
<template>
  {{ count }}
  {{ msg }}
  
  <button @click="inc"> + </button>
</template>

<script setup>
  import { ref } from 'vue'
  
  let count = 0
  const msg = ref('Hello')
  
  function inc() {
    count += 1
    console.log(count)
  }
</script>

v-for 指令的参数 item 和 index（如果items是一个对象参数就是 value key index），只在带有 v-for 指令的起始标签 <li v-for="(item, index) in items">，和对应的闭合标签 </li> 区域内，才可以使用：

<template>
  <li v-for="(item, index) in items">
    <!-- 这里的 item 是 { message: 'msg1' }，该区域可以访问 v-for 指令的item参数，就不会再去外层找全局的item -->
    {{ item }}
    {{ index }} - {{ item.message }}
  </li>
  
  <!-- 并不是 items 的某一个元素 -->
  {{ item }} // 全局变量
</template>

<script setup>
  import { ref } from 'vue'
  
  const items = ref([
    {
      message: 'msg1'
    }
  ])
  
  const item = ref('全局变量')
</script>

即使可以，也不推荐 v-for 的参数与全局变量同名

in 还是 of

<div v-for="item in items"></div>
<div v-for="item of items"></div>

这两行代码效果是一样的，选择 in 还是 of ，取决于你们团队的代码风格

在 v-for 里使用范围值

注意如果你要直接遍历一个数字，那么一定要是 正整数

<span v-for="n in 10">{{ n }}</span> <!-- 正常渲染 1~10 -->

<span v-for="n in -10">{{ n }}</span> <!-- 报错 -->

<span v-for="n in 10.2">{{ n }}</span> <!-- 报错 -->

<span v-for="n in 0">{{ n }}</span> <!-- 不报错，效果和 v-if="false" 类似，当前元素和子元素都不会被添加到 DOM 中 -->

template 上的 v-for

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

最终的 DOM 里不会出现 <template>

v-for 与 v-if

只需要记住，v-for 和 v-if 作用在同一个标签上时，v-if 不能使用 v-for 的 参数 或 带有参数的表达式 作为值，其他情况都没问题

<!-- 可以这样用 -->
<li v-for="todo in todos" v-if="true">
  {{ todo.name }}
</li>

<!-- 可以这样用 -->
<li v-for="todo in todos" v-if="false">
  {{ todo.name }}
</li>

<!-- 可以这样用 -->
<li v-for="todo in todos" v-if="todos.length">
  {{ todo.name }}
</li>

<!-- 不可以这样用 -->
<li v-for="todo in todos" v-if="todo.isComplete">
  {{ todo.name }}
</li>

<!-- 不可以这样用 -->
<li v-for="(item, index) in todos" v-if="index > 1">
  {{ todo.name }}
</li>

上面例子中 item 和 index 都不能出现在 v-if 接收的表达式中

对于对象 value key index 都不能出现在 v-if 接收的表达式中

你可以这么理解

<li v-for="todo in todos" v-if="!todo.isComplete">    
 {{ todo.name }}
</li>

<!-- 类似，并不是完全等价。如果真按照下面这么写，会去找组件内声明的todo变量 -->
<template v-if="!todo.isComplete">
  <li v-for="todo in todos">
    {{ todo.name }}
  </li>
</template>