首頁 > 文章 > web前端 > 簡單理解Vue條件渲染_vue.js

簡單理解Vue條件渲染_vue.js

不言原創: 2018-03-31 17:04:391134瀏覽

這篇文章主要幫助大家簡單理解Vue條件渲染，什麼是Vue條件渲染,具有一定的參考價值，有興趣的夥伴們可以參考一下

一、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>
 <p class="test">
 <p v-if="isDisplay"> <!--if...else... 单个元素-->
 显示我1
 </p>
 <p v-else>
 显示我2
 </p>
 </p>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

輸出結果是:顯示我1

二、v-if顯示多個元素,需配合d477f9ce7bf77f53fbcf36bec1b69b7a

注意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>
 <p class="test">
 <template v-if="isDisplay"> <!--if...else... 用template实现多个元素-->
 <p>显示我1</p>
 <p>显示我11</p>
 <p>显示我12</p>
 <p>显示我13</p>
 </template>
 <p v-else>
 显示我2
 </p>
 </p>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

輸出結果: 顯示我1 顯示我11 顯示我12 顯示我13

#三、v-show只支援單元素顯示,不支援d477f9ce7bf77f53fbcf36bec1b69b7a包含的多元素

注意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>
 <p class="test">
 <p v-show="isDisplay"> <!--if...else... 单个元素,注意注意 v-show 不支持 <template> 语法-->
 显示我1
 </p>
 <p v-else>
 显示我2
 </p>
 </p>
 <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 較好

gitHub地址:https://github.com/lily1010/vue_learn /tree/master/lesson08

簡單理解Vue條件渲染_vue.js

相關文章