<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">
<button @click="update">对数据进行修改</button>
<div class="div" v-for="(item,index) in person">
<p>{{ item.name}}-{{ item.age}}-{{ item.sex}}</p>
</div>
</div>
</body>
<!-- 使用cdn方式引入vue--对于制作原型或学习,你可以这样使用最新版本: -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
//初始化一个vue实例
Vue.config.productionTip = false
var vm = new Vue({
el: "#root",
data: {
person: [{
name: '张三',
age: 18,
sex: 'mail',
id: 1
}, {
name: '王五',
age: 19,
sex: 'femal',
id: 2
}, {
name: '周杰伦',
age: 5519,
sex: 'femal',
id: 3
}, {
name: '王俊凯',
age: 111,
sex: 'femal',
id: 4
}]
},
methods: {
update() { //直接使用赋值的方式修改原数组的话是无效的视图是不会改变的---当
//先点击修改在点击打开开发者工具是可以看到数据被修改的--但是反过来是不行的--但是通过vm.person[0]修改的是可以生效的
this.person[0] = {
name: '林左幅',
age: 222,
sex: 'lzf',
id: 1
}
}
},
created: function() {
console.log(this);
}
})
</script>
</html>
vue数据更新时候的问题
最新推荐文章于 2024-04-25 15:52:18 发布