极客观点
项目管理
HarmonyOS
<!--
* @Author: chj
* @FileName:vue.set.html
* @Date: 2018-06-22 13:58:18
* @Last Modified by: chj
* @Last Modified time: 2018-06-22 16:10:47
-->
<!DOCTYPE html>
<html lang="cmn-hans">
<head>
<meta charset="utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<script src="../assets/js/vue.js" type="text/javascript"></script>
<title>vue.set</title>
</head>
<body>
<h1>vue.set</h1>
<hr>
<div id="app">
<ol>
<li>姓名:{{outData.Name}}</li>
<li>年龄:{{outData.Age}}</li>
<li>学校:{{outData.School}}</li>
<li v-show="isShow">班号:{{outData.class}}</li>
<li v-if="isTrue">学号:{{outData.No}}</li>
</ol>
<button @click="plus" id="btn1">增加一个学号信息</button>
<button onclick="changeClass()" id="btn2">修改班号</button>
<ol>
<ul>
<li v-for=" value in arr">{{value}}</li>
</ul>
</ol>
<button onclick="add()">修改数组</button>
</div>
<script type="text/javascript">
//外部数据
var outData = {
Name: '小明',
Age: 18,
School: '光明小学'
}
//修改班级号
function changeClass() {
Vue.set(outData, "class", "10");
console.log("outData.class:"+outData.class);
}
function add() {
//app.arr[1] = 'ddd';
Vue.set(app.arr,1,'ddd');
console.log(app.arr[1]);
}
var app = new Vue({
el: "#app",
data: {
outData: outData,
isTrue: false,
isShow: false,
class: "5",
arr: ['aaa', 'bbb', 'ccc']
},
methods: {
plus: function() {
this.isTrue = true;
this.isShow = true;
outData["No"] = "123";
outData["class"] = this.class;
console.log('outData.class:'+outData.class);
},
}
})
</script>
</body>
</html>
分别点击btn1和btn2的时候，值分别是5和10.
但是页面中数值依然是5没有变化，这个是为什么呢
this.outData.class = this.class