<!--
* @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: "-sharpapp",
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>
when you click btn1 and btn2, the values are 5 and 10.
but the value in the page is still 5. Why is this
?