微信二维码
微博二维码
qq号二维码

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

王伟平 2022.08.02 50人浏览
重学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>


转自稀土掘金


分享到:
微信小程序之wx.uploadFile
  • 2019.11.30
  • 天津插画培训,0基础学插画到底要不要报班?
  • 2022.08.12