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

我只有在应用程序已经实例化之后，才需要模板标记呈现。我也试过这段代码的变体，但没有成功。有人可以帮忙吗？

你使用的是什么？ 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>

这很好，但我该怎么做呢？如果我想从我的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!' 
    } 
})

好吧，我不想立即加载“应用程序”，而是点击一个按钮..并且我不想在我的页面上显示原始标记{{message}}，然后单击按钮。 – raphadko

@raphadko当你点击按钮时，你想显示该消息？我对么？ –

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

相关推荐