集合的遍歷:
使用v-for = 'item of itemList' 或者 v-for = 'item in itemList'
當想要獲取下標時 使用 v-for = '(item,index) of itemList' 或者 v-for = '(item,index) in itemList'
測試源碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的列表渲染</title>
<script src="vue.js"></script>
<style type="text/css">
.class111{
color:red;
}
</style>
</head>
<body>
<div id = 'app2'>
<!-- 遍歷 -->
<div v-for="(item,index) of userList" key = "item.index">
{{item.id}} -- {{item.text}} -- {{index}}
</div>
</div>
<script>
var app = new Vue({
el:'#app2',
data:{
userList:[
{id:11,text:"aaa"},
{id:22,text:"bbb"},
{id:33,text:"ccc"},
{id:44,text:"ddd"}
]
},
methods:{
}
});
</script>
</body>
</html>
集合的刪除
當想要刪除某一項時
使用 item.List.splice(index,amout); <!--意思是從第幾個下標開始刪除幾個-->
測試源碼如下 ，效果爲點哪刪哪
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的列表渲染</title>
<script src="vue.js"></script>
<style type="text/css">
.class111{
color:red;
}
</style>
</head>
<body>
<div id = 'app2'>
<!-- 遍歷 -->
<div v-for="(item,index) of userList" @click="deleThis(index)">
{{item.id}} -- {{item.text}} -- {{index}}
</div>
</div>
<script>
var app = new Vue({
el:'#app2',
data:{
userList:[
{id:11,text:"aaa"},
{id:22,text:"bbb"},
{id:33,text:"ccc"},
{id:44,text:"ddd"}
]
},
methods:{
deleThis:function(index){
this.userList.splice(index,1);
}
}
});
</script>
</body>
</html>
集合的修改
三種方式
1.可以直接改變 userList對象的引用來修改
2.使用 userList.splice(下標,1,修改成的值);
3.Vue.set(vm實例.userList,"鍵",值) 或者 vue實例.$set(userList,"鍵",值)
代碼就不貼了，自行體會
集合的新增
1.可以直接改變 userList對象的引用來新增
2.Vue.set(vm實例.userList,"新鍵",值) 或者 vue實例.$set(vm實例.userList,"新鍵",值)
代碼也不貼了,自行體會