本文實例為大家分享了vue.js中條件渲染的練習代碼，供大家參考，具體內容如下
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>條件渲染</title>
</head>
<body>
<!-- v-if 作為判斷條件 如果滿足則展示它所附著的元素的內容-->
<!-- 除了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使用時必須加在一個元素上 如果想要根據一個判定條件展示多個數據的話 要用到template-->
<!-- template相當於一個包裝元素 不顯示在網頁上 -->
<template v-if="ok">
<h1>這是個標題</h1>
<p>lowrie</p>
</template>
<!-- v-else還可以跟在v-show後-->
<!-- 注意：v-else必須緊跟在v-show 或者v-if後 否則浏覽器不能識別 -->
<!-- v-show和v-if的區別 v-show所附著的元素會一直存在於Dom層中 是簡單的切換元素的CSS屬性display -->
<!-- 注意：v-show不支持template -->
<div v-show="ok">
我是v-show
</div>
<!-- v-if v-show對比：
v-if是真實的條件渲染，因為它會確保條件塊在切換當中適當地銷毀與重建條件塊內的事件監聽器和子組件。
v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——在條件第一次變為真時才開始局部編譯（編譯會被緩存起來）。
相比之下， v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。
一般來說， v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運行時條件不大可能改變則使用 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:'我的隨機數大於0.5'
}
});
var app2=new Vue({
el:'#app-2',
data:{
message2:'我的隨機數小於0.5'
}
});
本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。