Detailed explanation of vue instance methods and data

This article mainly introduces relevant information about vue instance methods and data. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

1.vm.$set

Problem description:

How to add a showMore attribute to the list data without looping the data, and change this new attribute in moreFun value and implement two-way binding?

<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 didn’t know how to do it at first, and Xiaoying thought that this code would definitely report an error. However, when Xiaoying wrote it, she found that it did not. Later, the handsome guy told me to look at vue’s vm.$set . After reading it, Xiaoying wrote the moreFun method as:

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

and then achieved the result Xiaoying wanted. The problem Xiaoying encountered at the time was similar to this:

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

Problem: After executing the moreFun method, although the value of the showMore attribute in the list became true, the

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

button Show More is still displayed because if new properties are added to the instance after the instance is created, it will not trigger a view update.

So later Xiaoying added showMore directly to the list, and then it was fine. Now that I think about it, it can be solved with vm.$set.

2.vm.$watch

Usage:

An expression or calculated property function that observes Vue instance changes. The parameters obtained by the callback function are the new value and the old value. The expression only accepts supervised key paths. For more complex expressions, use a function instead.

Note: When mutating (not replacing) an object or array, the old value will be the same as the new value because their references point to the same object/array. Vue does not keep a copy of the value before the mutation.

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

3.vm.$delete

Usage:

This is an alias for the global Vue.delete.

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

Related recommendations:

Detailed explanation of using mockjs in the vue-cli project

Using images in vue to lazily load vue- lazyload plug-in

Define global variables and global function methods in the vue project

The above is the detailed content of Detailed explanation of vue instance methods and data. For more information, please follow other related articles on the PHP Chinese website!