v-show

根据表达式的真假值，来显示和隐藏元素

  <div id="app"><p>三眼五显仙人</p><p v-show="temp">魈kun牙白卡酷一</p><p v-show="ok">不敬仙师</p></div><script>var vm = new Vue({//创建一个vue实例el:"#app",  //el是vue实例的属性，用于和dom进行绑定data:{//data是vue实例的属性，用于配置vue实例的数据temp :false,   //隐藏ok:true}});window.setInterval(function() {//每秒闪烁一次vm.ok =! vm.ok;},1000)  </script>

v-if

根据表达式的真假值，来动态插入和移除元素

    <div id="app01"><div v-if="role=='diluc'"><h2>天使馈赠，您几位？</h2></div><div v-else-if=" role=='zhongli'"><h2>你有带钱吗？</h2></div><div v-else="role=='childe'"><h2>你不会不要我吧。</h2></div></div><script>new Vue({el:'#app01',data:{role:"diluc"}})</script>

二者的区别：

实现方式：

v-show通过样式的display控制标签的显示，在dom中是有标签的。但是没有显示，而v-if采用的是appendChild来实现的在执行之前dom是没有这个标签的看网页上的渲染效果也可以看出来

第一个p标签的style样式是display，这个p标签样式的display的值则是在none和inline之间反复横跳

我们一共设置了三个div但是最后dom只有一个

性能比较：

加载性能：v-if加载速度更快，v-show加载速度慢

切换开销：v-if切换开销大，v-show切换开销小

v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-show 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。

Vue的内置指令：v-if和v-show的区别相关推荐

Vue.js 内置指令
回顾一下第2.2节,我们己经介绍过指令(Directive)的概念了,Vue.js的指令是带有特殊前缀v-的HTML特性,它绑定一个表达式,并将一些特性应用到DOM上. 其实我们已经用到过很多Vue内 ...
vue所有内置指令（面试）
v-show:显示或隐藏元素. v-if/v-else-if/v-else:根据表达式的布尔值真假来生成或删除元素. v-for:循环的方式渲染嵌套的内容. v-bind(缩写":" ...
Vue 基础之常用内置指令
Vue 基础之常用内置指令描述指令内容渲染指令 {{}} 与 v-text 覆盖面积 v-text {{}} 闪现问题 {{}} v-text v-html 属性绑定指令 v-bind 简写 : ...
Vue（二）——常用内置指令
前言 Vue指令是带有v-前缀的特殊属性,它们作用于HTML元素,表示它们是Vue提供的特殊属性.将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为. 常用的Vue.js内置指令: v-i ...
2.0 vue内置指令与自定义指令
一.概述模板在解析之前指令是存在的,但是解析完成以后就不存在了. 1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHT ...
Vue.js 学习笔记第5章内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车回顾一下第2.2节,我们己经介绍过指令(Di ...
Vue.js实战——内置指令（二）
参考<Vue.js实战>梁灏 Vue内置指令第一部分:Vue.js实战--内置指令(一) 1 方法与事件 1.1 基本用法直接上代码,这样最实在: <!DOCTYPE html&g ...
Vue.js实战——内置指令（一）
参考:<Vue.js实战>梁灏 1. 基本指令 1.1 v-cloak <!DOCTYPE html> <html><head><meta cha ...
08.vue.js实战笔记（计算属性、v-bind及class和style的绑定、内置指令、方法与事件）
1.计算属性所有的计算属性都以函数的形式写在vue实例的computed选项内,最终返回计算后的结果 <!DOCTYPE html> <html lang="en&quo ...
Vue.js入门 0x2 内置指令（1）
基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除 , 常和 css的 display: none:配合使用. <div id= ...

Vue的内置指令：v-if和v-show的区别