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';].
【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: '3',
info: {
content: 'my name is test'
}
}
var key = 'content';
var vm = new Vue({
el:'#app',
data: data,
ready: function(){
//Vue.set(data,'sex', '男')
//this.$set('info.'+key, 'what is this?');
}
});
data.sex = '男'；//不生效
</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: '3',
info: {
content: 'my name is test'
}
}
var key = 'content';
new Vue({
el:'#app',
data: data,
ready: function(){
Vue.set(data,'sex', '男');
this.$set('info.'+key, 'what is this?');
}
});
</script>Verwandte kostenlose Lernempfehlungen:
JavaScriptDas 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!
