집 > 기사 > 웹 프론트엔드 > Vue 인스턴스 메소드 및 데이터에 대한 자세한 설명

Vue 인스턴스 메소드 및 데이터에 대한 자세한 설명

小云云원래의: 2018-01-04 10:09:32953검색

이 글은 Vue 인스턴스 메소드와 데이터에 대한 관련 정보를 주로 소개합니다. 매우 훌륭하고 참고할 가치가 있습니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

1.vm.$set

문제 설명:

데이터를 반복하지 않고 목록 데이터에 showMore 속성을 추가하고 moreFun에서 이 새 속성의 값을 변경하고 양방향 바인딩을 달성하는 방법은 무엇입니까?

<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은 어떻게 해야 할지 몰랐고

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

이 코드는 확실히 오류를 보고할 것이라고 생각했습니다. 그러나 Xiaoying이 코드를 작성했을 때 그렇지 않다는 것을 알게 되었습니다. 잘 생긴 남자가 나에게 vue의 vm.$set를 살펴보라고 말했습니다. 그것을 읽은 후 Xiaoying은 moreFun 메소드를 다음과 같이 작성했습니다:

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

그러면 Xiaoying이 원했던 결과가 달성되었습니다. 당시 Xiaoying이 직면한 문제는 다음과 유사했습니다.


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

문제: moreFun 메서드를 실행한 후 목록의 showMore 속성 값이 true가 되었음에도 불구하고

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

버튼 더보기가 계속 표시됩니다. 인스턴스가 생성된 후 인스턴스에 새 속성을 추가하면 뷰 업데이트가 트리거되지 않기 때문입니다.

그래서 나중에 Xiaoying이 showMore를 목록에 직접 추가했더니 괜찮았습니다. 지금 생각해보면 vm.$set로 해결이 가능하네요.

2.vm.$watch

사용법:

Vue 인스턴스 변경에 대한 표현식 또는 계산된 속성 함수를 관찰합니다. 콜백 함수에서 얻은 매개변수는 새 값과 이전 값입니다. 표현식은 감독된 키 경로만 허용합니다. 더 복잡한 표현식의 경우 대신 함수를 사용하세요.

참고: 객체 또는 배열을 변경(교체하지 않음)할 때 해당 참조가 동일한 객체/배열을 가리키기 때문에 이전 값은 새 값과 동일합니다. Vue는 돌연변이 이전의 값 사본을 보관하지 않습니다.

<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

사용법:

이것은 전역 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>

Vue 인스턴스 메소드 및 데이터에 대한 자세한 설명

관련 기사