Detaillierte Erläuterung der Methoden und Daten der Vue-Instanz

Dieser Artikel stellt hauptsächlich relevante Informationen zu Vue-Instanzmethoden und -Daten vor. Er ist sehr gut und hat Referenzwert. Ich hoffe, er kann jedem helfen.

1.vm.$set

Problembeschreibung:

So fügen Sie ein showMore-Attribut hinzu, um Daten ohne Datenschleife aufzulisten, und ändern dieses neue Attribut in moreFun-Wert und implementieren Zwei-Wege-Bindung?

<template>
 <p id="app">
  <p class="demo">
   <ul>
    <template v-for="(v,index) in list">
     <li>{{v.name}}</li>
     <p v-show="!v.showMore">
      <button @click="moreFun(index)">展示更多</button>
     </p>
    </template>
   </ul>
  </p>
 </p>
</template>
<script>
export default {
 name: 'app',
 data() {
  return {
   list: [{
    name: '小颖'
   }, {
    name: '仔仔'
   }, {
    name: '黑妞'
   }, {
    name: '土豆'
   }]
  }
 },
 methods: {
  moreFun(index) {
   console.log(this.list);
  }
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

Xiaoying wusste zunächst nicht, wie es geht, und Xiaoying hatte das Gefühl, dass

 <p v-show="!v.showMore">
      <button @click="moreFun(index)">展示更多</button>
     </p>

Dieser Code wird definitiv einen Fehler melden, aber als Xiaoying ihn schrieb , fand sie heraus, Nein, später sagte mir der gutaussehende Kerl, ich solle mir vues vm.$set ansehen. Nachdem er es gelesen hatte, schrieb Xiaoying die moreFun-Methode als:

 moreFun(index) {
   this.$set(this.list[index], 'showMore', true);
   console.log(this.list);
  }

und erzielte dann das von Xiaoying gewünschte Ergebnis. Das Problem, auf das Xiaoying damals stieß, war ähnlich wie dieses:

<script>
export default {
 name: 'app',
 data() {
  return {
   list: [{
    name: '小颖'
   }, {
    name: '仔仔'
   }, {
    name: '黑妞'
   }, {
    name: '土豆'
   }]
  }
 },
 mounted: function() {
  this.list.forEach(function(element, index) {
   element.showMore = false;
  });
 },
 methods: {
  moreFun(index) {
   this.list[index].showMore = true;
   console.log(this.list);
  }
 }
}
</script>

Problem: Nachdem die moreFun-Methode ausgeführt wurde, obwohl der Wert des showMore-Attributs in der Liste wahr wurde,

<p v-show="!v.showMore"> <button @click="moreFun(index)">展示更多</button> </p>

Das

Die Schaltfläche „Mehr anzeigen“ wird weiterhin angezeigt, denn wenn der Instanz nach der Erstellung der Instanz neue Eigenschaften hinzugefügt werden, wird keine Ansichtsaktualisierung ausgelöst.

Später fügte Xiaoying showMore direkt zur Liste hinzu, und dann war alles in Ordnung. Wenn ich jetzt darüber nachdenke, kann es mit vm.$set gelöst werden.

2.vm.$watch

Verwendung:

Ein Ausdruck oder eine berechnete Eigenschaftsfunktion, die Änderungen in Vue-Instanzen beobachtet. Die von der Rückruffunktion erhaltenen Parameter sind der neue Wert und der alte Wert. Der Ausdruck akzeptiert nur überwachte Schlüsselpfade. Für komplexere Ausdrücke verwenden Sie stattdessen eine Funktion.

Hinweis: Beim Mutieren (nicht Ersetzen) eines Objekts oder Arrays ist der alte Wert derselbe wie der neue Wert, da ihre Referenzen auf dasselbe Objekt/Array verweisen. Vue behält vor der Mutation keine Kopie des Werts.

<template>
 <p id="app">
  <p class="demo">
   <input type="text" class="num1" v-model="num1">
   <label class="sign">-</label>
   <input type="text" class="num2" v-model="num2">
   <label class="sign">=</label>
   <label class="result">{{resultNum}}</label>
  </p>
 </p>
</template>
<script>
export default {
 name: 'app',
 data() {
  return {
   num1: 1,
   num2: 5,
   resultNum: null
  }
 },
 watch: {
  num1: function() {
   var _num1 = parseInt(this.num1);
   var _num2 = parseInt(this.num2);
   this.resultNum = _num1 - _num2;
  },
  num2: function() {
   var _num1 = parseInt(this.num1);
   var _num2 = parseInt(this.num2);
   this.resultNum = _num1 - _num2;
  }
 },
 mounted: function() {
  var _num1 = parseInt(this.num1);
  var _num2 = parseInt(this.num2);
  this.resultNum = _num1 - _num2;
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
input.num1,
input.num2 {
 width: 100px;
}
label.sign {
 font-size: 30px;
 vertical-align: -3px;
}
label.result {
 font-size: 20px;
}
</style>

3.vm.$delete

Verwendung:

Dies ist ein Alias ​​für das globale Vue.delete.

<template>
 <p id="app">
  <p class="demo">
   <ul>
    <template v-for="(v,index) in list">
     <li>{{v.name}}</li>
     <li>{{v.age}}</li>
     <button @click="deleteFun(index)">delete</button>
    </template>
   </ul>
  </p>
 </p>
</template>
<script>
export default {
 name: 'app',
 data() {
  return {
   list: [{
    name: '小颖',
    age:22
   }, {
    name: '仔仔',
    age:1
   }, {
    name: '黑妞',
    age:1
   }, {
    name: '土豆',
    age:1
   }]
  }
 },
 methods: {
  deleteFun(index) {
   this.$delete(this.list[index], 'age');
  }
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

Verwandte Empfehlungen:

Ausführliche Erklärung der Verwendung von Mockjs im Vue-Cli-Projekt

Verwendung von Image Lazy Loading im Vue Vue-Lazyload-Plug-In

Definieren Sie globale Variablen und globale Funktionsmethoden im Vue-Projekt

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Methoden und Daten der Vue-Instanz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!