當前位置：
首頁 >
Vue条件渲染
發布時間：2025/7/25
68
豆豆
gitHub地址:https://github.com/manlili/vue_learn里面lesson08
?
一?v-if顯示單個元素
注意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... 單個元素-->顯示我1</div><div v-else>顯示我2</div></div><script type="text/javascript">var myVue =new Vue({el: ".test",data: {isDisplay: 1}})</script></body> </html>輸出結果是:顯示我1
?
二 v-if顯示多個元素,需配合<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實現多個元素--><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>輸出結果: 顯示我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... 單個元素,注意注意 v-show 不支持 <template> 語法-->顯示我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的區別
(1)v-if是真實的渲染與卸載,只不過第一次渲染后,會將結果緩存一下
(2)v-show元素始終被編譯并保留，只是簡單地基于 CSS 切換
(3)總結:?如果需要頻繁切換?v-show?較好，如果在運行時條件不大可能改變?v-if?較好
轉載于:https://www.cnblogs.com/lily1010/p/5839209.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
- 上一篇： TypeScript学习笔记（七） -
- 下一篇： VueJs路由跳转——vue-route