學習vue.js條件渲染
更新時間：2016年12月03日 16:27:13 作者：1owrie
這篇文章主要和大家一起學習vue.js條件渲染，代碼注釋詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue.js中條件渲染的練習代碼，供大家參考，具體內(nèi)容如下
html:
<!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使用時必須加在一個元素上 如果想要根據(jù)一個判定條件展示多個數(shù)據(jù)的話 要用到template-->
<!-- template相當于一個包裝元素 不顯示在網(wǎng)頁上 -->
<template v-if="ok">
<h1>這是個標題</h1>
<p>lowrie</p>
</template>
<!-- v-else還可以跟在v-show后-->
<!-- 注意：v-else必須緊跟在v-show 或者v-if后 否則瀏覽器不能識別 -->
<!-- v-show和v-if的區(qū)別 v-show所附著的元素會一直存在于Dom層中 是簡單的切換元素的CSS屬性display -->
<!-- 注意：v-show不支持template -->
<div v-show="ok">
我是v-show
</div>
<!-- v-if v-show對比：
v-if是真實的條件渲染，因為它會確保條件塊在切換當中適當?shù)劁N毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯會被緩存起來）。
相比之下， 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:'我的隨機數(shù)大于0.5'
}
});
var app2=new Vue({
el:'#app-2',
data:{
message2:'我的隨機數(shù)小于0.5'
}
});
本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
基于vue-cli、elementUI的Vue超簡單入門小例子（推薦）
這篇文章主要介紹了基于vue-cli、elementUI的Vue超簡單入門小例子，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了Vue自定義組件雙向綁定實現(xiàn)原理及方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了vue?scoped與深度選擇器deep的原理分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue3中使用echarts的簡單七個步驟(易懂,附緊急避坑)
近期在做一個vue3的項目,里面有個圖表需求,因公司之前使用第三方封裝的圖表缺少文檔,就去看了echars的官網(wǎng)文檔,引入原生echars來實現(xiàn),下面這篇文章主要給大家介紹了關于Vue3中使用echarts的簡單七個步驟,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue項目自動轉換 px 為 rem的實現(xiàn)方法，本文是通過一系列的配置后，轉換成熱門，具體內(nèi)容詳情大家跟隨小編一起通過本文學習吧2018-10-10
這篇文章主要介紹了Vue獲取頁面元素的相對位置的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
vue長列表優(yōu)化之虛擬列表實現(xiàn)過程詳解
前端的業(yè)務開發(fā)中會遇到不使用分頁方式來加載長列表的需求,下面這篇文章主要給大家介紹了關于vue長列表優(yōu)化之虛擬列表實現(xiàn)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
elementUI el-input 只能輸入正整數(shù)驗證的操作方法
這篇文章主要介紹了elementUI el-input 只能輸入正整數(shù)驗證,本文給大家詳細講解對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue實現(xiàn)在線進制轉換功能,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2025-04-04
路由存在兩者模式,一種是歷史模式history,一種是hash模式,下面這篇文章主要給大家介紹了關于vite?vue3下配置history模式路由的相關資料,需要的朋友可以參考下2023-01-01