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,
      }
    })