用法一、布尔值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>元素 都被隐藏了
