v-if和v-show

基本使用

v-if，顧名思義，條件判斷。當得到結果為true時，所在的元素才會被渲染。

語法：

v-if="布爾表達式"

示例：

<div id="app"><button v-on:click="show = !show">點我呀</button><br><h1 v-if="show">看到我啦？！</h1><h1 v-show="show">看到我啦？！show</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {show: true}}) </script>

效果：

?

與v-for結合

當v-if和v-for出現在一起時，v-for優先級更高。也就是說，會先遍歷，再判斷條件。

修改v-for中的案例，添加v-if：

<ul><li v-for="(user, index) in users" v-if="user.gender == '女'">{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}</li></ul>

效果：

只顯示女性用戶信息

?

v-else

你可以使用 v-else 指令來表示 v-if 的“else 塊”：

<div id="app"><h1 v-if="Math.random() > 0.5">看到我啦？！if</h1><h1 v-else>看到我啦？！else</h1> </div>

v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。

?

v-else-if，顧名思義，充當 v-if 的“else-if 塊”，可以連續使用：

<div id="app"><button v-on:click="random=Math.random()">點我呀</button><span>{{random}}</span><h1 v-if="random >= 0.75">看到我啦？！if</h1><h1 v-else-if="random > 0.5">看到我啦？！if 0.5</h1><h1 v-else-if="random > 0.25">看到我啦？！if 0.25</h1><h1 v-else>看到我啦？！else</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {random: 1}}) </script>

類似于 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之后。

演示：

?

v-show

另一個用于根據條件展示元素的選項是 v-show 指令。用法大致一樣：

<h1 v-show="ok">Hello!</h1>

不同的是帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。

示例：

<div id="app"><!--事件中直接寫js片段--><button v-on:click="show = !show">點擊切換</button><br/><h1 v-if="show">你好</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{show:true}})</script>

代碼：

?

總結

以上是生活随笔為你收集整理的v-if和v-show的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。