您的位置：首页 > 产品设计 > UI/UE

vue 对象改变时,同步更新视图的办法

2017-10-17 00:00 148 查看

Vue 的数据如果是对象的话,改变对象的属性,视图不会更新

这时候需要调用set方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/uikit.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>bs</title>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue.js"></script>
<script src="js/uikit.min.js"></script>
<script src="js/maze.js"></script>
</head>
<body>
<div class="container" id='myDiv'>

<ul>
<li v-for=" (i,index) in items">{{i}}</li>
</ul>

<button class="btn" @click='btn_click'>增加</button>
<button class="btn" @click='btn_click2'>自己内部改变</button>
<button class="btn" onclick='btn_click3()'>外部通过函数改变</button>

</div>
</body>

<script>
var myDiv = new Vue({
el: '#myDiv',
data: {
items: new Array(),
},
methods: {
btn_click: function () {
this.items.push(1)
console.log('btn_click')
},
btn_click2: function () {
//内部通过this改变
this.$set(this.items, '0', parseInt(this.items[0]) + 2)
console.log('btn_click2')
}
}
})

//外部通过函数改变
function btn_click3() {
console.log('btn3')
Vue.set(myDiv.items, '0',parseInt(myDiv.items[0]) + 2)
}

</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js vus

相关文章推荐

新的分享

章节导航