A quoi sert vue.set-Voir.js-php.cn

A quoi sert vue.set

coldplay.xixi

Libérer： 2020-11-12 11:56:30

original

5092 Les gens l'ont consulté

Les fonctions de vue.set : 1. Définissez l'attribut de données via la méthode [Vue.set], le code est [Vue.set(data,'sex', 'male') ]; 2. Utilisez la méthode d'instance [vm.$set], le code est [var key = 'content';].

A quoi sert vue.set

[Articles connexes recommandés : vue.js]

Le rôle de vue.set :

Lorsqu'une instance de vue est générée, parfois elle ne sera pas automatiquement mise à jour vers la vue lorsque les données sont attribué à nouveau. Remontez ;

Si vous ajoutez de nouveaux attributs à l'instance après la création de l'instance, cela ne déclenchera pas de mise à jour de la vue

<!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>

Copier après la connexion

Exécution des résultats :

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

Copier après la connexion

est disponible dans les méthodes get et set age et name, mais il n'y a pas ces deux méthodes dans sex, par conséquent, vue ne mettra pas automatiquement à jour la vue après avoir défini la valeur du sexe

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>

Copier après la connexion

< ; 🎜>1. Pass La méthode Vue.set définit l'attribut data, comme ci-dessus :

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

Copier après la connexion

2 Vous pouvez également utiliser la méthode d'instance vm.$set, qui est également un alias du Vue.set global. méthode :

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;);

Copier après la connexion