vue 提供了一个指令 v-for 解决循环的问题,更高效, 会使用原有的数据结构。
案例:
<!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>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="fruit of fruits">{{fruit.name}}</li> // fruit 单个对象 // of 可以用in替换
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
fruits:[{name:'苹果'},{name:'西瓜'}]
}
})
</script>
</body>
</html>
获取索引的方法:
案例:
<div id="app">
<ul>
<li v-for="(fruit,index) of fruits">{{fruit.name}}{{index}}</li>
</ul>
</div>
复杂的结构取值:
<!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>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(fruit,index) of fruits">{{index+1}}.{{fruit.name}}
<ul>
<li v-for="(c,child) in fruit.color">
{{index+1}}.{{child+1}}.{{c}}
</li>
</ul>
</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
fruits:[{name:'苹果',color:['gree','yello']},{name:'西瓜',color:['red','yello']}]
}
})
vm.arr.reverse(); //数据倒置
</script>
</body>
</html>
网友评论