Vue.js中set()方法的用途_vue中set的作用-CSDN博客

本文链接：https://blog.csdn.net/qq_43390721/article/details/84981680

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue $set</title>
<script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
<div id="app">
  姓名：{{ name }}<br>
    年龄：{{age}}<br>
    性别：{{sex}}<br>
    说明：{{info.content}}
</div>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
var data = {
    name: "star",
    age: '18',
    log: {
        content: 'my name is star'
    }
}    
var key = 'content';
var vm = new Vue({
    el:'#app',
    data: data,
    ready: function(){
        //Vue.set(data,'sex', '男')
        //this.$set('log.'+key, 'what is this?');
    }
});
data.sex = '男'；
</script>
</body>
</html>

输出结果：

姓名：star
年龄：18
性别：
说明：my name is test

说明Vue实例外部变量不能访问，所以需要使用Set()方法来改变

Vue.set()方法

vue.set(target,key,value)

target:{Array | Object}
key:{string | number}
value: any

同时用Vue.set运行上面代码

<script>
var data = {
    name: "star",
    age: '18',
    log: {
        content: 'my name is star'
    }
}    
var key = 'content';
new Vue({
    el:'#app',
    data: data,
    ready: function(){
        Vue.set(data,'sex', '男');
        this.$set('log.'+key, 'what is this?');
    }
});
</script>

运行结果：

姓名：star
年龄：18
性别：男
说明：my name is test

1.vue.set()来改变data来赋值给sex

2.vm.$set()来改变，也是Vue.set()方法的别名，用this调用