簡(jiǎn)單理解Vue條件渲染
更新時(shí)間：2021年10月26日 17:06:03 作者：半畝花田
這篇文章主要幫助大家簡(jiǎn)單理解Vue條件渲染，什么是Vue條件渲染,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
一、v-if顯示單個(gè)元素
注意else只能跟在v-if或者v-show后面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue條件渲染</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<div v-if="isDisplay"> <!--if...else... 單個(gè)元素-->
顯示我1
</div>
<div v-else>
顯示我2
</div>
</div>
<script type="text/javascript">
var myVue =new Vue({
el: ".test",
data: {
isDisplay: 1
}
})
</script>
</body>
</html>
輸出結(jié)果是:顯示我1
二、v-if顯示多個(gè)元素,需配合<template>
注意else只能跟在v-if或者v-show后面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue條件渲染</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<template v-if="isDisplay"> <!--if...else... 用template實(shí)現(xiàn)多個(gè)元素-->
<div>顯示我1</div>
<div>顯示我11</div>
<div>顯示我12</div>
<div>顯示我13</div>
</template>
<div v-else>
顯示我2
</div>
</div>
<script type="text/javascript">
var myVue =new Vue({
el: ".test",
data: {
isDisplay: 1
}
})
</script>
</body>
</html>
輸出結(jié)果: 顯示我1 顯示我11 顯示我12 顯示我13
三、v-show只支持單元素顯示,不支持<template>包含的多元素
注意else只能跟在v-if或者v-show后面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue條件渲染</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<div v-show="isDisplay"> <!--if...else... 單個(gè)元素,注意注意 v-show 不支持 <template> 語(yǔ)法-->
顯示我1
</div>
<div v-else>
顯示我2
</div>
</div>
<script type="text/javascript">
var myVue =new Vue({
el: ".test",
data: {
isDisplay: 1
}
})
</script>
</body>
</html>
四、v-if與v-show的區(qū)別
(1)v-if是真實(shí)的渲染與卸載,只不過(guò)第一次渲染后,會(huì)將結(jié)果緩存一下
(2)v-show元素始終被編譯并保留，只是簡(jiǎn)單地基于 CSS 切換
(3)總結(jié): 如果需要頻繁切換 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變 v-if 較好
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Vue3里的EffectScope，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
webpack項(xiàng)目中使用vite加速的兼容模式詳解
這篇文章主要為大家介紹了webpack項(xiàng)目中使用vite加速的兼容模式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue3?el-table結(jié)合seamless-scroll實(shí)現(xiàn)表格數(shù)據(jù)滾動(dòng)的思路詳解
這篇文章主要介紹了vue3?el-table結(jié)合seamless-scroll實(shí)現(xiàn)表格數(shù)據(jù)滾動(dòng),創(chuàng)建兩個(gè)table，隱藏第一個(gè)table的body部分，這樣就能得到一個(gè)固定的head，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
本篇文章主要介紹了vue.js之vue-cli腳手架的搭建詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Ant Design moment對(duì)象和字符串之間的相互轉(zhuǎn)化教程
這篇文章主要介紹了Ant Design moment對(duì)象和字符串之間的相互轉(zhuǎn)化教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
keep-alive是Vue提供的一個(gè)抽象組件，用來(lái)對(duì)組件進(jìn)行緩存，從而節(jié)省性能，由于是一個(gè)抽象組件，所以在頁(yè)面渲染完畢后不會(huì)被渲染成一個(gè)DOM元素。這篇文章主要介紹了vue的keep-alive中使用EventBus的方法,需要的朋友可以參考下2019-04-04
封裝組件相信對(duì)大家來(lái)說(shuō)都不陌生了,下面這篇文章主要給大家介紹了關(guān)于用VUE封裝一個(gè)文本滾動(dòng)組件的相關(guān)資料,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue 使用OSS上傳圖片或附件講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
Vue組件中常見(jiàn)的props默認(rèn)值陷阱問(wèn)題
這篇文章主要介紹了避免Vue組件中常見(jiàn)的props默認(rèn)值陷阱,本文通過(guò)問(wèn)題展示及解決方案給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
Vue聯(lián)動(dòng)Echarts實(shí)現(xiàn)數(shù)據(jù)大屏展示
這篇文章主要為大家介紹了Vue聯(lián)動(dòng)Echarts實(shí)現(xiàn)數(shù)據(jù)大屏的展示示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04