Explication détaillée des méthodes et des données de l'instance de vue

Cet article présente principalement des informations pertinentes sur les méthodes et les données des instances Vue. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer.

1.vm.$set

Description du problème :

Comment ajouter un attribut showMore pour lister les données sans boucler les données, et modifier ce nouvel attribut dans la valeur moreFun et l'implémenter liaison bidirectionnelle ?

<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 ne savait pas comment le faire au début, et Xiaoying a estimé que

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

Ce code signalera certainement une erreur, mais quand Xiaoying l'a écrit , elle a découvert , Non, plus tard, le beau mec m'a dit de regarder la vm de vue.$set Après l'avoir lu, Xiaoying a écrit la méthode moreFun comme :

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

et a ensuite obtenu le résultat souhaité par Xiaoying. Le problème rencontré par Xiaoying à l'époque était similaire à celui-ci :

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

Problème : après avoir exécuté la méthode moreFun, bien que la valeur de l'attribut showMore dans la liste soit devenue vraie,

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

Le

Le bouton Afficher plus est toujours affiché car si de nouvelles propriétés sont ajoutées à l'instance après la création de l'instance, cela ne déclenchera pas de mise à jour de la vue.

Plus tard, Xiaoying a ajouté showMore directement à la liste, et tout s'est bien passé. Maintenant que j'y pense, cela peut être résolu avec vm.$set.

2.vm.$watch

Utilisation :

Une expression ou une fonction de propriété calculée qui observe les changements dans les instances de Vue. Les paramètres obtenus par la fonction de rappel sont la nouvelle valeur et l'ancienne valeur. L’expression n’accepte que les chemins de clés supervisés. Pour des expressions plus complexes, utilisez plutôt une fonction.

Remarque : lors de la mutation (et non du remplacement) d'un objet ou d'un tableau, l'ancienne valeur sera la même que la nouvelle valeur car leurs références pointent vers le même objet/tableau. Vue ne conserve pas de copie de la valeur avant la mutation.

<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

Utilisation :

Il s'agit d'un alias pour Vue.delete global.

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

Recommandations associées :

Explication détaillée de l'utilisation de mockjs dans le projet vue-cli

Utilisation du chargement différé d'image dans le plug-in vue vue-lazyload

Définir les variables globales et les méthodes de fonction globales dans le projet vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!