이 글의 내용은 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: '#app', data: { message: 'Runoob!' }, computed: { //计算属性的getter reversedMessage: function () { // `this指向vm实例 return this.message.split('').reverse().join('') } } })</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: '#app', data: { message: 'Runoob!' }, computed: { //计算属性的getter reversedMessage: function () { // `this指向vm实例 return this.message.split('').reverse().join('') } } })</script>
methods 방법
-효과는 동일하지만 종속성 캐시를 기반으로 계산되며 관련 종속성이 변경될 때만 재평가됩니다. 메서드를 사용하면 다시 렌더링할 때 항상 함수가 호출되고 다시 실행됩니다.
methods: { reversedMessage2: function () { return this.message.split('').reverse().join('') } }
계산 속성에는 기본적으로 getter만 있지만 필요한 경우 setter를 제공할 수도 있습니다. 원래 속성을 업데이트하는 데 사용됩니다
위 내용은 vue.js의 계산된 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!