改變數(shù)據(jù)同時(shí)也修改頁(yè)面的方法
方法一：通過數(shù)組變異的方法：push pop shift unshift splice sort reverse
方法二：通過改變對(duì)象引用
方法三：通過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中不能通過下標(biāo)來改變頁(yè)面數(shù)組中的數(shù)據(jù)，例如 vm.list[1]={id:333,text:"ddg"}
// 只能通過下列方法：push pop shift unshift splice sort reverse
// 或者通過改變對(duì)象的引用地址：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>
// 對(duì)象的操作
<!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({
// 實(shí)現(xiàn)改變數(shù)據(jù)也改變頁(yè)面
// userInfo: {
// name: "puxiaotaoc",
// age: 28,
// gender: "female",
// address: "wuhan"
// } 改變對(duì)象的引用
// Vue.set(vm.userInfo,"address","wuhan") 全局方法
// vm.$set(vm.userInfo,"address","wuhan") 實(shí)例方法
el: '#app',
data: {
userInfo: {
name: "puxiaotaoc",
age: 28,
gender: "female"
}
}
})
</script>
</body>
</html>
// 數(shù)組的操作
<!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) 實(shí)例方法
var vm = new Vue({
el: '#app',
data: {
userInfo: [1, 2, 3]
}
})
</script>
</body>
</html>
