携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

循环语句

v-for指令

v-for循环语句是很常用的语法，可以用于渲染数组、结构体中的数据到一个列表、页面中。但是v-for指令需要使用"site in sites"型的特殊语法，其中sites指的是源数据数组，site是数组元素迭代的别名。

• 代码示例：

<div id="appdemo">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: '苹果' },
        { text: '香蕉' },
        { text: '菠萝' }
      ]
    }
  }
}

Vue.createApp(app).mount('#appdemo')
</script>

效果：

索引值参数

v-for指令还支持一个可选的第二个参数，参数值为当前项的索引（数组下标）：

• 代码示例：

<div id="appdemo">
  <ul>
    <li v-for="(site, index) in sites">
      {{ index }} -{{ site.text }}
    </li>
  </ul>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: '苹果' },
        { text: '香蕉' },
        { text: '菠萝' }
      ]
    }
  }
}

Vue.createApp(app).mount('#appdemo')
</script>

效果：

template

v-for指令也可以像条件语句一样使用template模板，。

• 代码示例：

 <template v-for="site in sites">
		<li>{{ site.text }}</li>
		<li>《++++++++++++》</li>
  </template>

只需将以上代码替换掉ul标签中的代码即可。

迭代对象

v-for指令可以通过对象的属性来迭代数据渲染到页面中。

<div id="appdemo">
  <ul>
    <li v-for="value in strut">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
const app = {
  data() {
    return {
      strut: {
        name: 'ikun',
        url: 'www.jntm.com',
        slogan: '披金成王，伴坤远航'
      }
    }
  }
}
Vue.createApp(app).mount('#appdemo')
</script>

提供键名和索引

因为对象的数据是键值对的形式，所以我们可以添加键名作为参数和循环出键名和对象数据.

• 代码示例：

<ul> 
    <li v-for="(value, key) in object"> 
        {{ key }} : {{ value }}
            </li>
                </ul>

v-for指令还可以添加第三个参所作为索引。

• 代码示例：

<ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>

整数

v-for循环可以直接迭代整数。

<ul>
// 从1循环到1000
    <li v-for="n in 1000">
     {{ n }}
    </li>
  </ul>

循环数据处理过后的结果

我们可以对数组、对象数据处理之后再进行渲染出来。

• 代码示例

<div id="appdemo">
  <ul>
    <li v-for="num in ChooseNumbers">{{ num }}</li>
  </ul>
</div>
 
<script>
const app = {
    data() {
        return {
            numbers: [ 1, 2, 3, 4, 5,6,8,10 ]
	     }
    },
    computed: {
        ChooseNumbers() {
        // 将nummber数组中对2取余，余数为零的数放入ChooseNumber中。
            return this.numbers.filter(number => number % 2 === 0)
        }
    }
}
 
Vue.createApp(app).mount('#appdemo')
</script>