一、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>輸出結(jié)果是:顯示我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實(shí)現(xiàn)多個元素--> <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... 單個元素,注意注意 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的區(qū)別
(1)v-if是真實(shí)的渲染與卸載,只不過第一次渲染后,會將結(jié)果緩存一下
(2)v-show元素始終被編譯并保留，只是簡單地基于 CSS 切換
(3)總結(jié): 如果需要頻繁切換 v-show 較好，如果在運(yùn)行時條件不大可能改變 v-if 較好
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
