0
点赞
收藏
分享

微信扫一扫

Vue的列表渲染指令

佃成成成成 2023-02-07 阅读 95


列表渲染指令 v-for

当需要将一个数组便利或者枚举一个对象循环显示时,就会用到列表渲染指令  v-for。

它的表达式需要结合in 来使用,类似于item in items的形式。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Vue内置指令</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="book in books">{{book.name}}</li>
</ul>
</div>

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app= new Vue({
el:'#app',
data:{
books:[
{name:'《书本1》'},
{name:'《书本2》'},
{name:'《书本3》'}
]
}
})
</script>
</body>
</html>


Vue的列表渲染指令_VUE

在表达式中,books是数据,book是当前元素的别名,循环出的每个<li>元素内的元素都可以访问到

对应的当前数据book

列表渲染也支持用of 代替in 作为分隔符

<li v-for="book of books">{{book.name}}</li>

v-for的表达式支持一个可选参数作为当前项的索引:

 

<div id="app">
<ul>
<li v-for="(book,index) in books">{{index}}-{{book.name}}</li>
</ul>
</div>

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app= new Vue({
el:'#app',
data:{
books:[
{name:'《书本1》'},
{name:'《书本2》'},
{name:'《书本3》'}
]
}
})
</script>

Vue的列表渲染指令_Vue_02

除了数组外,对象的属性也是可以遍历的:

<div id="app1">
<ul>
<span v-for="value in user">{{value}}<br></span>
</ul>
</div>

var app1= new Vue({
el:'#app1',
data:{
user:{
name:'badao',
age:22,
tel:11111111
}
}

Vue的列表渲染指令_Vue_03

v-for还可以迭代整数:

<div id="app3">
<span v-for="n in 10">{{n}}</span>
</div>

var app3 = new Vue({
el:'#app3'
})

Vue的列表渲染指令_.net_04

举报

相关推荐

0 条评论