vue-- 列表渲染

最新推荐文章于 2021-11-03 10:04:38 发布

weixin_44889992

最新推荐文章于 2021-11-03 10:04:38 发布

阅读量72

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44889992/article/details/89366123

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

列表渲染

v-for指令
v-for = " xxx in data "
{{ xxx }}
如果需要索引 index
v-for = "(item,index) in data "
{{ item }} — {{ index }}
对象：
v-for = “(index,item,key) in obj”

** 例子 **

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 列表渲染 </title>
<script src="../../basic-source/vue.js"></script>
</head>
<body>
<div id="app">
<h3> arr-item </h3>
<ul>
<li v-for = " item in arr ">
{{ item }}
</li>
</ul>
<h3> arr - index </h3>
<ul>
<li v-for = " (item,index) in arr ">
{{ item }}---{{ index }}
</li>
</ul>
<h3> obj </h3>
<ul>
<li v-for = " (index,item,key) in obj ">
{{ index }}----{{ item }} -- {{ key }}
</li>
</ul>
<h3>json</h3>
<ul>
<li v-for = "(item,index) in json">
{{ item.card }} --- {{ item.name }} --- {{ item.age }}
</li>
</ul>
<h3> 嵌套循环 </h3>
<ul>
<li v-for = "item in json">
<ul>
<li v-for = "item in item">
{{ item }}
</li>
</ul>
</li>
</ul>
<h3> 循环一个数字 </h3>
<ul>
<li v-for = " item in 10 ">
{{ item }}
</li>
</ul>
<h3> 循环一个字符 </h3>
<ul>
<li v-for = " item in 'yanyabing' ">
{{ item }}
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
arr: ['a','b','c'],
obj: {
id: 1,
name: '王麻子',
age: 50
},
json: [
{
card: 1,
name: '齐天润',
age: 20
},
{
card: 2,
name: '段云凤',
age: 18
}
],
}
})
</script>
</html>

总结:

v-for 最多可以有三个参数
格式
v-for = “(index,item,key) in data”
名词解释：
index: 索引
item； data中的每一个
key；如果是对象，表示对象的key
v-for如果有循环嵌套，那么value可以写成一样的命名，但是我们建议大家写成不一样的命名，理由：比较语义化
v-for 可以循环数字或是一个字符
扩展：
v-for = ’ item in data’
底层：
function v-for( arg ){
//做字符串处理
var data = ‘data’
for( var i = 0 ; i < data.length; i++ ){
}
}