v-if v-else v-else if 條件指令/ v-if 與 v-show 差別

用法一、布爾值ture/false 顯示/隐藏元素

1. true 顯示元素：v-if的值和seen 屬性值一緻，為 true。<p>元素顯示

<div id="app-3">
  <p v-if="seen">現在你看到我了</p>
</div>

<script>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
</script>
           

2.flase 隐藏元素：把app3.seen 屬性值改為false，v-if的值也為false，<p>元素隐藏

<div id="app-3">
  <p v-if="seen">現在你看到我了</p>
</div>

<script>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

app3.seen=false
</script>
           

用法二、在<template>元素上使用，顯示/ 隐藏整個分組（就是同時顯示/ 隐藏多個元素）

注意：

vue 函數綁定的元素要包裹在  <template> 元素外面，也就是說，要綁定在<template> 元素的父元素上，不能直接綁定在<template>元素

例子中，a=new Vue 綁定在 <template> 的父元素<div id="app">

<div id="app">  
<template v-if="true">
<p id="a" v-html="rawHtml">Using mustaches: {{ rawHtml }}</p>
<p >Using v-html directive: </p>
</template>
</div>

<script> //vue js 代碼寫在這裡

var a=new Vue({
el:"#app",                 //綁定的元素
data:{ rawHtml:'<span style="color:red">利用vue添加了插入一個span 元素</span>'  //元素内資料代碼 message
}
});

</script>
           

當v-if 的值為 true 時，網頁顯示<template> 包裹的所有元素；

網頁效果：

當v-if 的值為 false 時，網頁隐藏<template> 包裹的所有元素；

<div id="app">  
<template v-if="flase">
<p id="a" v-html="rawHtml">Using mustaches: {{ rawHtml }}</p>
<p >Using v-html directive: </p>
</template>
</div>
           

網頁效果：<template> 包裹的<p>元素 都被隐藏了

 v-else 和 v-else-if 元素必須緊跟在帶 v-if 或者 v-else-if  的元素之後, 否則無法識别

1. v-else 用法

 2.v-else-if 用法 

v-show

一、定義： 

v-show 不支援<template> 元素，也不支援 v-else

二、v-if 與v-show 差別

共同點：都可以實作渲染和隐藏的功能

差別：帶有 

v-show

 的元素始終會被渲染并保留在 DOM 中。

v-show

 隻是簡單地切換元素的 CSS 屬性 

display

。