계산 기능은 내가 vue.js에 새로 온 사람과 문제가 나

Question

작동하지 복용량, 나는 단어, 반전 내가 버튼을 클릭하면 작업이 기능을 만들었지 만 작동 알려주는 계산 기능이 페이지로드시 문제가 무엇입니까? 이,

new Vue({ 
el: '#computed', 
data: { 
    word: 'welcome', 
}, 
computed: { 
    alertRev: function() { 
     // get the word reversed 
     alert (this.word.split('').reverse().join('')); 
    }, 
}}); 

vue.js 코드 그리고 이것은 HTML 코드 :

<div id="computed"> 
    <button @click="alertRev">reverse the word</button> 
</div> 

그리고 이것은으로 @BertEvans이 방법은 달성 표시 Link to code

Answer 1

jsFiddle 링크에게 무엇인지 하고 싶다.

제 생각에 계산 된 속성은 일반적으로 경고와 같은 작업 수행과 달리 함수에서 결과를 반환합니다. Vuejs 워드 프로세서에서 뻔뻔 변형 예 (https://vuejs.org/v2/guide/computed.html)

new Vue({ 
 
    el: '#computed', 
 
    data: { 
 
    word: 'welcome', 
 
    }, 
 
    computed: { 
 
    reversedMessage: function() { 
 
     // get the word reversed, no alert 
 
     return this.word.split('').reverse().join(''); 
 
    }, 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 
<div id="computed" style="font-family: arial;"> 
 
    Type the word: <input type="text" v-model="word"> 
 
    <br /> 
 
    <br /> Reversed: {{ reversedMessage }} 
 
</div>

있어서 예 : 제쳐두고

new Vue({ 
 
    el: '#computed', 
 
    data: { 
 
    word: 'welcome', 
 
    }, 
 
    methods: { 
 
    alertRev: function() { 
 
     // get the word reversed 
 
     alert(this.word.split('').reverse().join('')); 
 
    }, 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 
<div id="computed"> 
 
    Word: {{ word }} 
 
    <br /> 
 
    <br /> 
 
    <button @click="alertRev">Reverse the word (alert)</button> 
 
</div>

계산 속성 비동기 매우 유용하지 작업.

호프는 젖은 걸레가 달린 우표 뒷면에 Vuejs에 대해 알고있는 글을 쓸 수 있다는 것을 강조하지 않기를 바랍니다.