What is the use of vue.set-Vue.js-php.cn

What is the use of vue.set

coldplay.xixi

Release： 2020-11-12 11:56:30

Original

5104 people have browsed it

The function of vue.set: 1. Set the data attribute through the [Vue.set] method, the code is [Vue.set(data,'sex', 'male') ]; 2. Use the [vm.$set] instance method, the code is [var key = 'content';].

What is the use of vue.set

【Recommended related articles: vue.js】

#The role of vue.set:

When a vue instance is generated, when data is assigned again, sometimes it will not be automatically updated to the view. Go up;

If you add new attributes to the instance after the instance is created, it will not trigger a view update

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue $set</title>
<script src="https://static.jb51.net/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: "php中文网",
 age: &#39;3&#39;,
 info: {
  content: &#39;my name is test&#39;
 }
}
var key = &#39;content&#39;;
var vm = new Vue({
 el:&#39;#app&#39;,
 data: data,
 ready: function(){
  //Vue.set(data,&#39;sex&#39;, &#39;男&#39;)
  //this.$set(&#39;info.&#39;+key, &#39;what is this?&#39;);
 }
});
data.sex = &#39;男&#39;；//不生效
</script>
</body>
</html>

Copy after login

Running results:

姓名：php中文网
年龄：3
性别：
说明：my name is test

Copy after login

Both in age and name get and set methods, but there are no these two methods in sex. Therefore, vue will not automatically update the view after setting the sex value;

Solution:

<script>
var data = {
 name: "脚本之家",
 age: &#39;3&#39;,
 info: {
  content: &#39;my name is test&#39;
 }
} 
var key = &#39;content&#39;;
new Vue({
 el:&#39;#app&#39;,
 data: data,
 ready: function(){
  Vue.set(data,&#39;sex&#39;, &#39;男&#39;);
  this.$set(&#39;info.&#39;+key, &#39;what is this?&#39;);
 }
});
</script>

Copy after login

1. Pass The Vue.set method sets the data attribute, as above:

Vue.set(data,&#39;sex&#39;, &#39;男&#39;)

Copy after login

2. You can also use the vm.$set instance method, which is also an alias of the global Vue.set method:

var key = &#39;content&#39;; //这种主要用于当对象中某个属性值动态生成时处理方式
this.$set(&#39;info.&#39;+key, &#39;what is this?&#39;);
//或
this.$set(&#39;info.content&#39;, &#39;what is this?&#39;);

Copy after login

Related free learning recommendations: JavaScript(Video)

The above is the detailed content of What is the use of vue.set. For more information, please follow other related articles on the PHP Chinese website!