在 VueJS 中的模板中显示值

Question

I have some code below, I want show "header" in template and show or hide when header not null.

<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

Your question is not totally clear. You have the component receiving the prop header but header is not defined on the main Vue instance. You need to be passing that prop from the main data object / Vue instance into the component to use it there.

<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>

Also using the same data object header to control whether the component is rendered or not using v-if . So if header is null or false it wont be rendered. When it becomes true or contains a value it will be rendered and the value of header will be passed to component through binding it (eg :header="header")

Answer 2

There is some syntax mistake in your code, to insert text into tag you can achieve with v-text attribute not data={{this.header}} .

And if you wanna hide some tag or component based on data value, you can use v-if .

And the last thing is if you wanna pass value intro component you can achieve that with this way v-bind:header="value" , and value is variable which hold value you wanna pass.

<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>