Vue中改变数组及对象内容的方法
1.Vue中改变数组内容并在视图中展示的方法(三种):①变异方法(7个):push,shift,unshift,pop,sort,splice,reverse②set方法(例子如下)<!DOCTYPE html><html lang="en"><head><meta charset
·
1.Vue中改变数组内容并在视图中展示的方法(三种):
①变异方法(7个):push,shift,unshift,pop,sort,splice,reverse
②set方法(例子如下)
<!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>Vue中使用set方法改变视图中数组的内容</title>
</head>
<body>
<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
<div v-for="item of list" @click="changContent" >{{item}}</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
list:['点','我','第','二','个','字','变','你']
},
methods:{
changContent(){
// Vue.set(vm.list,1,'你')
vm.$set(vm.list,1,'你')
}
}
})
</script>
</body>
</html>
③直接改变数组的引用:
比如要改变元素组中某一项内容,将数组全部使用,并改变其中一项即可。
2.Vue中改变对象中的内容并在视图中展示(两种方法)
①改变对象的引用
②使用set方法
注:改变Vue中对象的两种方法的使用同改变数组方法的使用一样。重点掌握set方法即可。
更多推荐
已为社区贡献2条内容
所有评论(0)