<!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實現(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>

輸出結果: 顯示我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是真實的渲染與卸載,只不過第一次渲染后,會將結果緩存一下

(2)v-show元素始終被編譯并保留，只是簡單地基于 CSS 切換

(3)總結: 如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: