Question

我下面有一些代码，我想要show＆＃34; header＆＃34;在模板中，当标题不为空时显示或隐藏。

<div id="hung">
    <cmx-test v-bind:header="${properties.header}"></cmx-test>
</div>
<script>
Vue.component('cmx-test', {
    props: ['header'],
        template: '<h1 class=\"fillColor\" data={{this.header}}></h1>'
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#hung'
});

</script>

Answer 1

你的问题并不完全清楚。您有接收prop header的组件，但未在主Vue实例上定义header。您需要将该主要数据对象/ Vue实例中的prop传递到组件中以在那里使用它。

<div id="hung">
    <cmx-test v-if="header" :header="header"></cmx-test>
</div>

<script>
    Vue.component('cmx-test', {
        props: ['header'],
           template: '<h1 class=\"fillColor\" :data="header">{{header}}</h1>'
    });

    // create a new Vue instance and mount it to our div element above with the id of app
    var vm = new Vue({
      el: '#hung'
      data:{
         header: null,
      }
    });
</script>

还使用相同的数据对象header来控制是否使用v-if呈现组件。因此，如果header为null或false，则不会呈现。当它变为真或包含一个值时，它将被渲染，header的值将通过绑定它传递给组件（例如：header =“header”）

Answer 2

您的代码中存在一些语法错误，您可以使用v-text属性而不是data={{this.header}}将文本插入到代码中。

如果您想根据数据值隐藏某些标记或组件，可以使用v-if。

最后一件事是，如果你想传递值介绍组件，你可以通过这种方式实现v-bind:header="value"，而value是变量，它可以保存你想传递的值。

<div id="hung">
    <cmx-test v-if="header" v-bind:header="value"></cmx-test>
    <button @click="header = true">Display</button>
</div>
<script>
Vue.component('cmx-test', {
    props: ['header'],
    template: '<h1 class=\"fillColor\" v-text="header"></h1>'
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#hung',
  data: {
    header: null,
    value: "Hello World!"
  }
});
</script>

在VueJS中显示模板中的值

2 个答案: