Heim >Web-Frontend >View.js >Was nützt vue.set

Was nützt vue.set

coldplay.xixi
coldplay.xixiOriginal
2020-11-12 11:56:305089Durchsuche

Die Funktion von vue.set: 1. Legen Sie das Datenattribut über die Methode [Vue.set] fest. Der Code lautet [Vue.set(data,'sex', 'male') ]; 2. Verwenden Sie die Instanzmethode [vm.$set]. Der Code lautet [var key = 'content';].

Was nützt vue.set

【Verwandte Artikelempfehlung: vue.js

Die Rolle von Vue.Set:

Wenn die VUE -Instanz generiert wird, wenn Daten erneut zugewiesen werden, dort Die Ansicht wird nicht automatisch aktualisiert.

Wenn Sie der Instanz neue Attribute hinzufügen, nachdem die Instanz erstellt wurde, wird die Ansichtsaktualisierung nicht ausgelöst und name , aber es gibt keine dieser beiden Methoden in Sex, daher aktualisiert Vue die Ansicht nicht automatisch, nachdem der Sex-Wert festgelegt wurde:

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

1 Legen Sie das Datenattribut wie oben beschrieben fest.

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

2. Sie können auch die vm.$set-Instanzmethode verwenden, die auch ein Alias ​​der globalen Vue.set-Methode ist:

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

Verwandte kostenlose Lernempfehlungen:

JavaScript

(Video)

Das obige ist der detaillierte Inhalt vonWas nützt vue.set. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn