vue 的一大特性就是修改数据后, 系统能自动更新到界面上
但这一特性并不是所有情况下都能实现, 就比如在数组中
在数组中, 用数组的下标直接修改数组的值, 系统并不会把这次修改更新到界面上
[直接修改 arr[0], 界面上不能自动更新]
而是把这次修改, 拖延到下一次同组件的界面更新时, 才更新
[直接修改 arr[0], 界面上不能自动更新] -> [修改一个无关值 boo]
也就是说, 子组件的更新还不足以触发数组的数据更新
[直接修改 arr[0], 界面上不能自动更新] -> [子组件修改一个无关值 boo]
而利用 Vue.set 就能立马弥补这个缺陷
[set修改 arr[1], 界面上可以自动更新]
demo 如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Vue.set 实例</title>
</head>
<body>
<div id="swq">
<div>arr: {
{arr}}</div>
<div>boo: {
{boo}}</div>
<button @click="click">直接修改 arr[0], 界面上不能自动更新</button>
<button @click="click2">set修改 arr[1], 界面上可以自动更新</button>
<button @click="click3">修改一个无关值 boo</button>
<hr />
<components1></components1>
</div>
<script type="text/x-template" id="components1-template">
<div>
子组件
<div>boo: {
{
boo}}</div>
<button @click="click4">子组件修改一个无关值 boo</button>
</div>
</script>
<script src="./jvw/vue/vue.2.5.16.js"></script>
<script type="text/javascript">
var components1 = {
template: "#components1-template",
data: function() {
return {
boo: true,
}
},
methods: {
click4() {
this.boo = !this.boo
},
},
};
var vu = new Vue({
el: "#swq",
data: {
arr: [1, 2],
boo: true,
},
components: {
components1
},
methods: {
click() {
this.arr[0]++;
console.log(this.arr)
},
click2() {
this.$set(this.arr, 1, this.arr[1] + 1);
console.log(this.arr)
},
click3() {
this.boo = !this.boo
},
},
})
</script>
</body>
</html>
附一个 Vue.set 的实际应用案例(Vue 多任务进度平均值计算器)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Vue 多任务进度平均值计算器</title>
<style type="text/css">
* {
-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; }
#swq ul li {
height: 30px; line-height: 30px; cursor: pointer; }
.tip {
font-size: 12px; color: gray; }
</style>
</head>
<body>
<div id="swq">
<input type="number" name="add" id="add" v-model="addnum" placeholder="初始进度" />
<button type="button" @click="add">添加任务</button>
<template v-if="lin.length > 0">
<ul>
<li v-for="(item , key) in lin" @click="increment(key)" v-bind:style="{
backgroundColor: 'rgba(0,255,0,' + item / 100 + ')' , width: item + '%' }"> {
{ item }}% </li>
</ul>
<p>总数: {
{ sum }}</p>
<p>平均值: {
{ sum / lin.length }}%</p>
</template>
<div class="tip">填写初始进度, 点击添加任务</div>
<div class="tip">点击任务进度值, 任务进度加1</div>
<div class="tip">任务进度满 100% 后继续点击, 即可删除该任务</div>
</div>
<script src="http://cdn.bootcss.com/vue/2.2.1/vue.js"></script>
<script>
var app = new Vue({
el: '#swq',
data: {
addnum: "",
lin: [90, 0]
},
methods: {
increment: function (a) {
if (this.lin[a] >= 100) {
this.lin.splice(a, 1);
} else if (this.lin[a] < 100) {
this.$set(this.lin, a, this.lin[a] + 1);
};
},
add() {
this.lin.push(~~this.addnum);
this.addnum = "";
}
},
computed: {
sum: function () {
return this.lin.reduce(function (x, y) {
return x + y;
});
},
}
});
</script>
</body>
</html>
//end