vue.js의 계산된 속성 소개

이 글의 내용은 vue.js의 계산 속성에 대한 소개입니다. 특정 참조 값이 있습니다. 필요한 친구가 이를 참조할 수 있습니다.

• 계산 방법
  - 계산 속성 reversedMessage를 선언합니다. . 제공된 함수는 vm.reversedMessage 속성에 대한 getter로 사용됩니다. vm.reversedMessage는 vm.message에 따라 달라집니다. vm.message가 변경되면 vm.reversedMessage도 업데이트됩니다.

<p id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p></p><script>var vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Runoob!&#39;
  },
  computed: {    //计算属性的getter
    reversedMessage: function () {
      // `this指向vm实例
      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})</script>

• methods 방법
  -효과는 동일하지만 종속성 캐시를 기반으로 계산되며 관련 종속성이 변경될 때만 재평가됩니다. 메서드를 사용하면 다시 렌더링할 때 항상 함수가 호출되고 다시 실행됩니다.

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

• computed 속성에는 기본적으로 getter만 있지만 필요한 경우 setter를 제공할 수도 있습니다. 원래 속성을 업데이트하는 데 사용됩니다.

• computed 메서드
  -계산된 속성 reversedMessage를 선언합니다. 제공된 함수는 vm.reversedMessage 속성에 대한 getter로 사용됩니다. vm.reversedMessage는 vm.message에 따라 달라집니다. vm.message가 변경되면 vm.reversedMessage도 업데이트됩니다.

<p id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p></p><script>var vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Runoob!&#39;
  },
  computed: {    //计算属性的getter
    reversedMessage: function () {
      // `this指向vm实例
      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})</script>

• methods 방법
  -효과는 동일하지만 종속성 캐시를 기반으로 계산되며 관련 종속성이 변경될 때만 재평가됩니다. 메서드를 사용하면 다시 렌더링할 때 항상 함수가 호출되고 다시 실행됩니다.

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

• 계산 속성에는 기본적으로 getter만 있지만 필요한 경우 setter를 제공할 수도 있습니다. 원래 속성을 업데이트하는 데 사용됩니다

위 내용은 vue.js의 계산된 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!