v-if 和v-show的相同和区别
引入vue.js
注意的是：
v-if后边的条件只要跟着v-else 中间就不能在夹杂任何的标签元素了
v-if和v-show 相同点都是实现对dom的操作，显示或者隐藏
不同的是：v-if是将元素在文章中删除。
v-show则是相当于添加了样式 display：none。
v-show不能使用在template标签上，只因为本身template就不会渲染，
只是在修改css属性中的display；也不能配合v-else使用。
所以：一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销，
因此。如果需要非常频繁的切换，就使用v-show，如果运行条件很少该笔那，则用v-if
条件渲染
1 v-if
在Vue中可以使用v-if来控制模板里元素的显示和隐藏，值为true就显示，为false就隐藏，v-if控制的是 是否渲染这个节点。
2 v-else v-else-if
当有else分支逻辑的时候，可以给该元素加上v-else 指令控制，v-else会根据上面的哪个v-if来控制，效果与 v-if相反，注意就是一定及挨着
还有哦v-else-if指令可以实现多分支逻辑。
<div id='app'>
{{msg}}
<p><button @click="isShow=!isShow">点击切换</button></p>
<!-- <p v-if='isShow'>v-if显示的p段落</p>
<p v-else>v-else文段</p> -->
<!-- v-show -->
<p v-show='isShow'>这个是v-show,</p>
<template v-show='isShow' >
<!-- 在这里v-show是不能和template一起使用的 如果套一起是=使用就讲v-show改成v-if -->
<p >这个是template文段</p>
</template>
<template v-if='isShow'>
<p>这个是新的恩端</p>
</template>
<!-- eg v-if
-->
<input type="text" v-model='type'>
<div v-if="type==='a'"> a</div>
<div v-else-if="type==='b'">b</div>
<div v-else-if="type==='c'">c</div>
<div v-else>Not a/b/c</div>
</div>
我们的script标签中内容
var vm =new Vue({
el:'#app',
data:{
msg:"nihao",
isShow:true,
type:true,
}
})