搜尋
首頁web前端Vue.js詳解Vue條件渲染指令:v-if 和 v-show
詳解Vue條件渲染指令:v-if 和 v-showAug 10, 2022 pm 05:03 PM
vuev-if條件渲染指令v-show

在Vue中,我們可以使用v-ifv-show來控制元素或模板的渲染。而v-ifv-show也屬於Vue的內部常用的指令。這裡所說的指令就是directive,指特殊的帶有前綴v-的命令,指令的值限定為綁定表達式,指令的職責是當表達式的值改變時把某些特殊的行為應用在DOM。

詳解Vue條件渲染指令:v-if 和 v-show

v-ifv-show兩個指令就是大家常說的條件渲染指令。 (學習影片分享:vue影片教學

v-if  : 條件分支指令


##咱們先來看

# v-if指令。其作用是根據表達式的值truefalse在DOM中產生或移除一個元素(或多個元素)。有點類似JavaScript中的if條件判斷。在Vue中除了v-if也有v-else-ifv-else之類。

v-if

前面說到過

v-if根據表達式來的值來判斷在DOM中生成元素。例如:

<!-- template -->
<div>
    <h1 id="v-if的值为true时-显示这个div元素">v-if的值为true时,显示这个div元素</h1>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {

    }
})
這個時候

元素插入到div#app元素中,並且渲染出來:

在Vue中,如果你需要讓某個元素是否渲染,那就在該元素上加上

v-if指令,並且設定其值為truefalse。例如上面的範例,我們設定的是true,元素被渲染。如果把上面的true值換成false

元素就不會渲染。 除了直接給

v-if設定truefalse之外,還可以透過表達式來做判斷。例如:

<!-- template -->
<div>
    <h1>
    v-if的值为true时,显示这个div元素
    </h1>
</div>
// JavaScript
    var app = new Vue({
    el: '#app',
    data: { isShow: true }
})
上面的範例中,宣告了

isShow的值為true,然後在h1元素中,透過 v-if指令綁定isShow。其實類似v-if="true"h1元素也正常渲染:

#當你把

isShow設定為false時,h1元素又不會渲染。

上面我們看到的是渲染一個元素,如果要渲染多個元素,那是不是直接裡面嵌套多個元素呢?讓我們來驗證一下自己的想法:

<!-- template -->
<div>
    <div>
        <h1 id="我是标题">我是标题</h1>
        <p>我是段落</p>
    </div>
</div>

和我們想像的一樣。但在Vue中,我們切換多個元素一般不這麼使用,而是配合

v-else

v-else# #else類似,但其要和

v-if

搭配使用。例如我們做登錄,如果登入了顯示一個歡迎語,反則提示用戶去登入。那我們可以設定一個

isLogined

表達式,例如:

<!-- Template -->
<div>
    <h1 id="欢迎来到W-cplus">欢迎来到W3cplus!(^_^)</h1>
    <h1 id="请先登录-再来">请先登录,再来!(^_^)</h1>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        isLogined: true
    }
})
如你所想,你在瀏覽器能看到下圖的效果:

isLogined

的值換成false

,那麼渲染出來的內容就改變了:

##在實際專案中,當我們一個元件在兩種狀態渲染的效果不一樣的時候,這個時候使用v-ifv-else

來配合

v-else-if#v-else-if和JavaScript中的else if 類似,需要和v-if搭配在一起使用。當有幾個條件同時在的時候,根據運算結果決定顯示與否。如下面的程式碼,根據type的值決定顯示哪一個區塊。例如,我們的例子,設定的type的值B

,那麼就會顯示區塊

B

<!-- template -->
<div>
    <div>显示A区域</div>
    <div>显示B区域</div>
    <div>显示C区域</div>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        type: "B"
    }
})
如果修改

type的值,將顯示的區域會不一樣:

#########

v-show


文章开头提到过,除了v-if之外,Vue还提供v-show也可以控制元素的渲染。v-showv-if功能有点相似,其中v-if依赖于控制DOM节点,而v-show是依赖于控制DOM节点的display属性。当v-show传入的值为true时,对应DOM元素的display的值为block之类的,反之为false时,display的值为none。也就是用户看不到元素的显示,但其DOM元素还是存在的。

<!-- Template -->
<div>
    <h1 id="我是一个标题">我是一个标题</h1>
    <p>我是一个段落</p>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        isShow: false
    }
})

在浏览器看到的效果将是这样的:

注意v-show 不支持 <template></template> 语法,也不支持 v-else

v-if Vs. v-show


v-ifv-show都能控制DOM元素的显示和隐藏,但是在切换v-if模块时,Vue有一个局部编译/卸载过程,因为v-if中的模板可能包括数据绑定或者子组件,v-if是真是的条件渲染,它会确保条件快在切换时合适的销毁与重建条件块内的时间监听器和子组件。

两者之间的具体区别,官网是这样描述的:

  • v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁重建
  • v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
  • 相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好

总结


这篇文章主要了解了Vue中的v-ifv-show。这两个都是Vue的内部指令,而且都是用来控制元素的渲染。只不过,v-if判断是否加载,可以减轻服务器的压力,在需要时加载;v-show调整DOM元素的CSS的dispaly属性,可以使客户端操作更加流畅。虽然这两都都能很好的控制元素的渲染,但实际使用的时候,更应该根据自己的场景来判断使用哪一个指令。

原文地址::https://www.w3cplus.com/vue/v-if-vs-v-show.html

(学习视频分享:web前端开发编程基础视频

以上是詳解Vue條件渲染指令:v-if 和 v-show的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:博客园。如有侵權,請聯絡admin@php.cn刪除
Vue常见面试题汇总(附答案解析)Vue常见面试题汇总(附答案解析)Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题(附答案解析)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

vue中props可以传递函数吗vue中props可以传递函数吗Jun 16, 2022 am 10:39 AM

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具