在Vue中,我們可以使用v-if
和v-show
來控制元素或模板的渲染。而v-if
和v-show
也屬於Vue的內部常用的指令。這裡所說的指令就是directive
,指特殊的帶有前綴v-
的命令,指令的值限定為綁定表達式,指令的職責是當表達式的值改變時把某些特殊的行為應用在DOM。
v-if
和v-show
兩個指令就是大家常說的條件渲染指令。 (學習影片分享:vue影片教學)
v-if : 條件分支指令
##咱們先來看
# v-if指令。其作用是根據表達式的值
true或
false在DOM中產生或移除一個元素(或多個元素)。有點類似JavaScript中的
if條件判斷。在Vue中除了
v-if也有
v-else-if和
v-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元素中,並且渲染出來:
v-if指令,並且設定其值為
true或
false。例如上面的範例,我們設定的是
true,元素被渲染。如果把上面的
true值換成
false,
元素就不會渲染。
除了直接給
v-if設定
true或
false之外,還可以透過表達式來做判斷。例如:
<!-- 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>
元素當做包裝元素,並在上面使用
v-if。最終的渲染結果不會包含
元素。如下圖所示:
<template>
<h1 id="标题">标题</h1>
<p>段落 1</p>
<p>段落 2</p>
</template>
v-else
v-else# #else
類似,但其要和
搭配使用。例如我們做登錄,如果登入了顯示一個歡迎語,反則提示用戶去登入。那我們可以設定一個
isLogined表達式,例如:
<!-- Template --> <div> <h1 id="欢迎来到W-cplus">欢迎来到W3cplus!(^_^)</h1> <h1 id="请先登录-再来">请先登录,再来!(^_^)</h1> </div> // JavaScript var app = new Vue({ el: '#app', data: { isLogined: true } })如你所想,你在瀏覽器能看到下圖的效果:
把
的值換成false
##在實際專案中,當我們一個元件在兩種狀態渲染的效果不一樣的時候,這個時候使用
v-if和
v-else
就很好實現了。例如中獎和未中獎:<template>
<figure>
<figcaption>恭喜你中了5元红包</figcaption>
<img src="/static/imghwm/default1.png" data-src="xxx" class="lazy" alt="詳解Vue條件渲染指令:v-if 和 v-show" >
</figure>
</template>
<template>
<figure>
<figcaption>亲,就差那么一点点</figcaption>
<img src="/static/imghwm/default1.png" data-src="xxx" class="lazy" alt="詳解Vue條件渲染指令:v-if 和 v-show" >
</figure>
</template>
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-show
和v-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-if
和v-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-if
和v-show
。这两个都是Vue的内部指令,而且都是用来控制元素的渲染。只不过,v-if
判断是否加载,可以减轻服务器的压力,在需要时加载;v-show
调整DOM元素的CSS的dispaly
属性,可以使客户端操作更加流畅。虽然这两都都能很好的控制元素的渲染,但实际使用的时候,更应该根据自己的场景来判断使用哪一个指令。
原文地址::https://www.w3cplus.com/vue/v-if-vs-v-show.html
以上是詳解Vue條件渲染指令:v-if 和 v-show的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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

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

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

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


熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

禪工作室 13.0.1
強大的PHP整合開發環境

SublimeText3漢化版
中文版,非常好用

SublimeText3 Linux新版
SublimeText3 Linux最新版

記事本++7.3.1
好用且免費的程式碼編輯器

Dreamweaver CS6
視覺化網頁開發工具