Question

我现在开始学习Vue，并且关注Jeffrey Way Vue 2的视频....在这段视频中https://laracasts.com/series/learn-vue-2-step-by-step/episodes/9他在html中有2条消息，在我这边它不起作用.. ..这是我的代码......只需将它复制粘贴到.html文档中就可以了......所以如果有人能解释一下，为什么我的第二条消息不显示？

<!-- begin snippet -->

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <!-- <link rel="stylesheet" type="text/css" href="/var/www/html/vanilla/Vue/bulma.min.css"> -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
</head>
<body>

<div id="root" class="container">

    <message title="Hello World" body="Lorem ipsum dolor sit amet"><message>
    <message title="Hello Latin" body="Repetitio est mater studiorum"><message>

</div>

<!-- <script src="/var/www/html/vanilla/Vue/vue.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script>
    Vue.component('message', {

    props: ['title', 'body'],

    data() {
        return {
            isVisible: true
        }
    },

    template: `
        <article class="message" v-show="isVisible">
          <div class="message-header">
              {{ title }}
              <button class="button" @click="hideModal">X</button>
          </div>
          <div class="message-body">
            {{ body }}
          </div>
        </article>
        `,

    methods: {
        hideModal() {
            this.isVisible = false;
        }
    }
});

new Vue({
    el: '#root'
});

</script>
</body>
</html>

<!-- end snippet -->

这个没有显示

<message title="Hello Latin" body="Repetitio est mater studiorum"><message>

Answer 1

<message title="Hello World" body="Lorem ipsum dolor sit amet"><message>

应该是

<message title="Hello W`enter code here`orld" body="Lorem ipsum dolor sit amet"></message>

您缺少结束标记</message>

Answer 2

试试这个

<html>
    <head>
        <title>Index</title>
        <!-- <link rel="stylesheet" type="text/css" href="/var/www/html/vanilla/Vue/bulma.min.css"> -->
        <link rel="stylesheet" type="text/css" >
    </head>
    <body>
    
    <div id="root" class="container">
        <message :title="title" :body="body"></message>
    
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
    <script>
        Vue.component('message', {
    
        props: ['title', 'body'],
    
        data() {
            return {
                isVisible: true
            }
        },
    
        template:'#bodyt',
            
    
        methods: {
            hideModal() {
                this.isVisible = false;
            }
        }
    });
    
    new Vue({
        el: '#root',
        data: {
        title: 'Hello Latin',
        body:'Repetitio est mater studiorum',
        },
    });
    </script>
    
    <template id="bodyt">
    
    <article class="message" v-show="isVisible">
              <div class="message-header">
                  {{ title }}
                  <button class="button" @click="hideModal">X</button>
              </div>
              <div class="message-body">
                {{ body }}
              </div>
            </article>
    </template>
            
    </body>
    </html>

Vue组件不显示另一个实例

2 个答案: