【原文链接】Vue----Vue条件渲染

（1）在components文件夹下新建一个Ifdemo.vue文件。

（2）然后在文件中编写如下内容，即写入一个标题

<template>
  <h3>条件渲染</h3>
</template>
<script>

</script>

（3）此时如果想在页面显示，只需要在App.vue中增加如下内容

（4）然后运行在浏览器中就可以看到IfDemo.vue中的内容了

（5）修改IfDemo.vue中的代码使用v-if设置条件渲染，如下所示

<template>
  <h3>条件渲染</h3>
  <div v-if="flag">你能看到我吗</div>
</template>
<script>
export default {
  data(){
    return {
      flag:true
    }
  }
}

</script>

此时浏览器是能看到的，因为此时flag为true，可以尝试一下将flag设置为false，然后浏览器就看不到这句话了。

（6）v-if和v-else一起用的方法如下所示

<template>
  <h3>条件渲染</h3>
  <div v-if="flag">你能看到我吗</div>
  <div v-else>你看不到我了</div>
</template>
<script>
export default {
  data(){
    return {
      flag:false
    }
  }
}

</script>

此时因为flag设置为false，所以这里会显示v-else的内容

（7）v-if,v-else-if,v-else 一起使用的方法如下所示

<template>
  <h3>条件渲染</h3>
  <div v-if="flag">你能看到我吗</div>
  <div v-else>你看不到我了</div>
  <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>
</template>
<script>
export default {
  data(){
    return {
      flag:false,
      type: "D"
    }
  }
}

</script>

此时的执行结果如下图所示

（8）此外，还可以通过v-shwo设置是否显示，如下所示

<template>
  <h3>条件渲染</h3>
  <div v-if="flag">你能看到我吗</div>
  <div v-else>你看不到我了</div>
  <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 v-show="flag">你能看到我吗</div>
</template>
<script>
export default {
  data(){
    return {
      flag:true,
      type: "D"
    }
  }
}

</script>

这里把flag设置为true了，所以会显示出来

（9）v-if和v-shwo的比较

• v-if 是真实的按条件渲染，因为它确保了在切换时，条件区内的事件监听器和子组件都会被销毁与重建

• v-if 也是惰性的，如果在初次渲染时条件为false，则不会做任何事，条件区块只有当条件首次变为true时才会被渲染

• v-shwo简单许多，元素无论初始条件如何，都会被渲染，只有CSS display属性会被切换

• 总体来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此，如果需要频繁切换，则使用v-shwo较好，如果在运行时绑定条件很少变化，则v-if更合适