顯示組件中的計算屬性

Question

我剛來到Components節（單向數據流），我無法弄清楚如何顯示它們的計算屬性。

<div id="demo"> 
    <input v-model="parentMsg"/> 
    <child v-bind:my-message="parentMsg"></child> 
</div> 

JS：

var Child = { 
    props: ['myMessage'], 
    template: '<span>{{ lowerCaseMsg }}</span>', 
    computed: { 
    lowerCaseMsg: function() { 
     return this.myMessage.trim().toLowerCase(); 
    } 
    } 
}); 

var data = { 
    parentMsg: 'Message' 
} 

var demo = new Vue({ 
    el: '#demo', 
    data: data, 
    components: { 
     child: Child 
    } 
}) 

Answer 1

你有一個語法錯誤代碼：

var Child = { 
    props: ['myMessage'], 
    template: '<span>{{ lowerCaseMsg }}</span>', 
    computed: { 
    lowerCaseMsg: function() { 
     return this.myMessage.trim().toLowerCase(); 
    } 
    } 
}); // Extraneous)