用法一、布尔值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。