如何在Vue.js中有條件地渲染元素？

我是新來Vue.js，我剛剛看了放在這裏（https://vuejs.org/v2/guide/conditional.html）條件呈現的文件，但不知何故無法得到它的工作...如何在Vue.js中有條件地渲染元素？

我的代碼：

<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!' 
     } 
    }) 
}

我只有在應用程序已經實例化之後，才需要模板標記呈現。我也試過這段代碼的變體，但沒有成功。有人可以幫忙嗎？

來源

2017-07-06 raphadko

你使用的是什麼？ CDN還是CLI？ –

我正在使用CDN .. 代碼與兩者不同嗎？ – raphadko

是的，如果你開始學習vue.js，那麼你最好做最好的練習。 –

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

來源

2017-07-06 14:43:49 Bert

這很好，但我該怎麼做呢？如果我想從我的API中獲取數據並創建vue對象後隱藏我的「加載」屏幕？ – raphadko

@raphadko這不是你問的問題。但是，有很多方法可以做到這一點。一，你可以通過Vue控制加載屏幕，在加載頁面時顯示加載屏幕，當你使用你閱讀的條件渲染技術返回數據時隱藏加載屏幕。如果出於某種原因，您的加載屏幕在Vue之外，那麼一旦檢索到數據，您仍然可以將其從Vue代碼中隱藏起來。 – Bert

試試這個，並移除按鈕。你不需要在函數中調用實例。

// 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!' 
    } 
})

來源

2017-07-06 14:37:12

好吧，我不想立即加載「應用程序」，而是點擊一個按鈕..並且我不想在我的頁面上顯示原始標記{{message}}，然後單擊按鈕。 – raphadko

@raphadko當你點擊按鈕時，你想顯示該消息？我對麼？ –

如何在Vue.js中有條件地渲染元素？

回答

相關問題