本节知识点
- vue.set概述
Vue.set作用
- Vue.set的作用就是在构造器外面操作构造器内部的数据，属性或者方法，比如在构造器内定义了一个count为1的数据,我在构造器外部定义了一个方法，需要每次点击加一，就需要用到vue.set
(一) 引用构造器外部的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{goodName}}的数量是{{count}}
</div>
<button onclick = "add()">点击我增加值变成4</button>
</body>
<script>
function add(){
Vue.set(jsonA,'count',4)
}
var jsonA = {
count : 1,
goodName:"car"
}
var app = new Vue({
el:"#app",
data:jsonA
})
</script>
</html>
Vue.set(json包,属性,值) 这个就是模板
要是里面是数组就必须要变成Vue.set(json包.属性，位置，修改后的值)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item,index) in count">
{{goodName}}的数量是{{item}}
</div>
</div>
<button onclick = "add()">点击我增加值变成12</button>
</body>
<script>
function add(){
Vue.set(jsonA.count,0,12)
}
var jsonA = {
count : ["哈哈",2],
goodName:"car"
}
var app = new Vue({
el:"#app",
data:jsonA
})
</script>
</html>
