Vue.jsで要素を条件付きでレンダリングする方法は？

Question

私はVue.jsに新たなんだ、私はちょうどここ（https://vuejs.org/v2/guide/conditional.html）を条件付きレンダリングのドキュメントを読んで何とかそれを動作させることはできません...

マイコード：

<button onclick="showTemplate()">Teste</button> 


<template v-if="app"> 

    <div id="app"> 
     {{ message }} 
    </div> 

</template> 

function showTemplate(){ 
    var app = new Vue({ 
     el: '#app', 
     data: { 
     message: 'Hello Vue!' 
     } 
    }) 
} 

私はアプリケーションがインスタンス化された後にのみ、テンプレートタグをレンダリングします。 私はこのコードのバリエーションを成功させることなく試しました。 誰かを助けることができますか？

Answer 1

v-cloakを使用してください。 v-cloakの使用目的は、インスタンス化されるまでVueを非表示にすることです。ここで

function showTemplate() { 
 
    var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     message: 'Hello Vue!' 
 
    } 
 
    }) 
 
}

[v-cloak] { 
 
    display: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 
<button onclick="showTemplate()">Teste</button> 
 

 
<div id="app" v-cloak> 
 
    {{ message }} 
 
</div>

データが取得されたときに、あなたの "読み込み" 画面を隠すかもしれない方法です。この場合、ボタンはローディング画面として機能します。あなたが使用しているもの

var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    message: 'Hello Vue!', 
 
    loaded: false 
 
    }, 
 
    methods: { 
 
    getData() { 
 
     setTimeout(() => this.loaded = true, 2000) 
 
    } 
 
    } 
 
})

[v-cloak] { 
 
    display: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 

 
<div id="app" v-cloak> 
 
    <button v-if="!loaded" @click="getData">Get Data</button> 
 

 
    <div v-if="loaded"> 
 
    {{ message }} 
 
    </div> 
 
</div>

Answer 2

これを試してボタンを削除してください。関数内でインスタンスを呼び出す必要はありません。

// put it on your index.html 
<div id="app"> 
    {{ message }} 
</div> 

// put it on your script make sure that you have already a CDN of vuejs. 
var app = new Vue({ 
    el: '#app', 
    data: { 
     message: 'Hello Vue!' 
    } 
})