Vue 列表渲染指令
2018-12-31 本文已影响8人
puxiaotaoc
改变数据同时也修改页面的方法
方法一：通过数组变异的方法：push pop shift unshift splice sort reverse
方法二：通过改变对象引用
方法三：通过set方法
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<div v-for="(item,index) of list" :key="item.id">
<div>{{item.text}} --- {{index}}</div>
<span>{{item.text}}</span>
</div>
</div>
<script>
// Vue中不能通过下标来改变页面数组中的数据，例如 vm.list[1]={id:333,text:"ddg"}
// 只能通过下列方法：push pop shift unshift splice sort reverse
// 或者通过改变对象的引用地址：vm.list=[{id: 010011001,text: "hello"}, {id: 010011002,text: "puxiaotaoc"}, {id: 010011003,text: "nice"}]
var vm = new Vue({
el: '#app',
data: {
list: [{
id: 010011001,
text: "hello"
}, {
id: 010011002,
text: "puxiaotao"
}, {
id: 010011003,
text: "nice"
}]
}
})
</script>
</body>
</html>
// 对象的操作
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<div v-for="(item,key,index) of userInfo">{{item}} --- {{key}} --- {{index}}</div>
</div>
<script>
var vm = new Vue({
// 实现改变数据也改变页面
// userInfo: {
// name: "puxiaotaoc",
// age: 28,
// gender: "female",
// address: "wuhan"
// } 改变对象的引用
// Vue.set(vm.userInfo,"address","wuhan") 全局方法
// vm.$set(vm.userInfo,"address","wuhan") 实例方法
el: '#app',
data: {
userInfo: {
name: "puxiaotaoc",
age: 28,
gender: "female"
}
}
})
</script>
</body>
</html>
// 数组的操作
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<div v-for="(item,index) of userInfo">{{item}} --- {{index}}</div>
</div>
<script>
// Vue.set(vm.userInfo,1,5) 全局方法
// vm.$set(vm.userInfo,2,10) 实例方法
var vm = new Vue({
el: '#app',
data: {
userInfo: [1, 2, 3]
}
})
</script>
</body>
</html>
