<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>條件渲染</title>
</head>
<body>
<!-- v-if 作為判斷條件 如果滿足則展示它所附著的元素的內(nèi)容-->
<!-- 除了v-if 還可以配合使用v-else--> 
<div id="app-1" v-if="Math.random()>0.5">
{{message}}
</div>
<div id="app-2" v-else>
{{message2}}
</div>

<!-- v-if使用時(shí)必須加在一個(gè)元素上 如果想要根據(jù)一個(gè)判定條件展示多個(gè)數(shù)據(jù)的話 要用到template-->
<!-- template相當(dāng)于一個(gè)包裝元素 不顯示在網(wǎng)頁(yè)上 -->
<template v-if="ok">
<h1>這是個(gè)標(biāo)題</h1>
<p>lowrie</p>
</template>
<!-- v-else還可以跟在v-show后-->
<!-- 注意：v-else必須緊跟在v-show 或者v-if后 否則瀏覽器不能識(shí)別 -->
<!-- v-show和v-if的區(qū)別 v-show所附著的元素會(huì)一直存在于Dom層中 是簡(jiǎn)單的切換元素的CSS屬性display -->
<!-- 注意：v-show不支持template -->
<div v-show="ok">
我是v-show
</div>
<!-- v-if v-show對(duì)比：
v-if是真實(shí)的條件渲染，因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中適當(dāng)?shù)劁N毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。
v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯會(huì)被緩存起來）。
相比之下， v-show 簡(jiǎn)單得多——元素始終被編譯并保留，只是簡(jiǎn)單地基于 CSS 切換。
一般來說， v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變則使用 v-if 較好。 -->

<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>

js:

var app1=new Vue({
el:'#app-1',
data:{
message:'我的隨機(jī)數(shù)大于0.5'
}
});
var app2=new Vue({
el:'#app-2',
data:{
message2:'我的隨機(jī)數(shù)小于0.5'
}
});

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: