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 )

显示组件中的计算属性

1 个答案: