重学Vue3 - 模板语法 - (6)

v-for可以用来遍历的数据是所有的 可迭代对象 和 数字 以及 普通对象

遍历对象

<div id="app">   <template v-for="(value, key, index) in info">     <div>{{ value }} - {{ key }} - {{ index }}</div>   </template> </div> <script>   Vue.createApp({     data() {       return {         info: {           name: 'Klaus',           age: 23         }       }     }   }).mount('#app') </script> 复制代码

遍历可迭代对象

<template v-for="(value, index) in 'Klaus'">   <div>{{ value }} - {{ index }}</div> </template> 复制代码

遍历数字

<template v-for="(value, index) in 20">   <div>{{ value }} - {{ index }}</div> </template> 复制代码

template

如果我们需要在多个元素上添加相同的指令，例如

<h1 v-if="showInfo">Klaus</h1> <h1 v-if="showInfo">24</h1> <!-- 渲染后的结果为 --> <h1>Klaus</h1> <h1>24</h1> 复制代码

此时在每个元素上添加相同指令必然是十分繁琐的，所以我们会使用一个div元素进行包裹

目的是为了将其中的那些元素，作为div的子元素进行统一管理

<div v-if="showInfo">   <h1>Klaus</h1>   <h1>24</h1> </div> <!-- 渲染后的结果为 --> <div>   <h1>Klaus</h1>   <h1>24</h1> </div> 复制代码

但是这么做，依旧存在一个很大的弊端，也就是我们额外引入了一个div元素

很多情况下，在渲染的时候，我们并不希望渲染这个额外的div元素

此时我们可以使用template元素

template元素可以当做不可⻅的包裹元素，一般和指令结合使用，在最终的渲染结构中，template并不会被最终渲染出来

<template v-if="showInfo"> <h1>Klaus</h1> <h1>24</h1> </template> <!-- 渲染后的结果为 --> <h1>Klaus</h1> <h1>24</h1>

转自稀土掘金