摘要：并在上面使用，最终渲染结果将不包括元素。另外一个根据条件展示元素的指令，用法与大致相同。注意，不支持元素，也不支持与看完了文章，你会发现我们可以利用和两个指令来控制我们元素的行为。
熟悉 Angular 的同学对指令肯定不会陌生，Vue中也借鉴了指令这一特性，在 Vue 中指令都是带有 v- 的特殊属性，那么指令有什么作用呢？
我的理解就是：指令是用来控制 DOM 元素的行为，例如最简单的显示，隐藏。
Vue 中有很多指令，在今后的学习过程总我们会逐步的学习，今天我们就来说说我们非常常用的两个条件指令 v-if 和 v-show。
v-if看到 v-if 你肯定会想到 Javascrip 中的 if else 条件判断语句，你会想是不是还会有 v-else 指令，没错 Vue 中不仅给我们提供了 v-else 指令而且还给我们提供了 v-else-if指令。
既然这样我们就很好理解 v-if 指令了，其实就是根据表达式的值是真(true)假(false)来重建或者销毁一个我们绑定的 DOM 元素。
怎么样，通过我这么一说你对 if 指令有了更清楚的认识了吧？
什么东西啊，你这叫解释的还行？（有些人）
好吧，我觉得我解释的还行，如果你觉得不行，我们就直接一点撸代码写个案例，让你一看就懂。
你看不见我，你看不见我，你看不见我
执行上面的代码，你会发现页面上除了什么都没有，还是什么都没有，总之你什么都看不见，就是不让你看见，怎么办？
我告诉你这个非常好办呀，把它打出来就行了，我们在浏览器的控制台打 vm.isShow=true 你就能看出效果了，不信？那我们就来试试。
看到了上面这个神奇的效果，我们再来思考一个问题，我们上面是在切换单个 DOM 元素，我们能不能来切换多个元素或者说嵌套元素呢？
你看不见我，你看不见我，你看不见我
呀，好像被你发现了！
正如我们的预期一样，我们嵌套多层元素也是没有问题的，效果还是那个效果。不过在 Vue 中推荐我们使用 标签包裹元素。并在上面使用 v-if，最终渲染结果将不包括 元素。
你看不见我，你看不见我，你看不见我
呀，好像被你发现了！
可以看到我们代码中使用的 标签在渲染的时候没有显示
v-else上面我们已经提到了 v-else指令，它必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。，我们用一个例子来看下它的用。
Modeng 是怎么样的一个人？
非常帅还是帅
我们会看到这样一个效果
如果我们修改下条件表达式的值
你会发现结果怎么还是帅，难道 Modeng 除了帅就没有别的结果了吗？其实，仔细的同学会发现，两个帅的不一样。
在这里只是和大家开个玩笑，其实我没有大家想象的那么帅，只是想通过这个例子让大家更容易理解和记住 v-else，你会发现我们的 v-if v-else指令和我们理解的 Javascript 中的 if else 一样都是非此即彼的结果。
我们在浏览网站的时候，经常会遇到这么一个情况，你在没有登陆的时候你看到的以一种内容，你在登陆的时候看到的又是另一种内容。如果我们用 if else指令就很好实现，大家可以自己尝试一下，我给一个简单的例子，更好玩的大家去发现。
v-else-if恭喜，恭喜，你竟然看到了我帅气的容貌！登陆才可以查看更多内容
顾名思义，我们不做过多的解释，因为前面我们已经解释过，大家都明白的，v-else-if 还可以连续使用。
v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
我是谁？我在哪？我怎么了？谁能救救我！
看个动图啥都明白了。
v-show另外一个根据条件展示 DOM 元素的指令，用法与 v-if大致相同。
不同点是：v-if控制的DOM元素的添加与删除，会存在 DOM 的渲染与销毁的过程。而 v-show 只是简单的控制元素的 CSS 的 display 属性。
当 v-show 的值为 true 时，绑定 DOM 的 display: block，当值为 false 时，绑定 DOM 的 display: none。
我只是用来控制 display 的属性值
我们可以清楚的看到 DOM 元素始终是存在的，v-show 只是利用元素的 display 属性控制着元素的显示隐藏。
注意，v-show 不支持 元素，也不支持 v-else
v-if 与 v-show看完了文章，你会发现我们可以利用v-if和v-show 两个指令来控制我们 DOM 元素的行为。但是两者又存在一定的区别，那么你该如何去选择使用那个指令呢？
来一起看官方的回答：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下 v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说 v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
总结我们可以利用不同的方法去控制我们的 DOM 行为。
v-if和v-show 都可以控制元素的显示隐藏但是有本质区别的，v-if 是控制元素的添加与删除，而 v-show 只是控制元素的 display 属性。
认识到两者的区别我们就可以肯定自己的场景去选择对应的方法，如果你的元素频繁切换建议使用 v-show，反之你可以使用 v-if。
关注微信公众号：六小登登。领取全套学习资源
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/98178.html
摘要：模版语法中的模版是基于的模版语法，所有的模版都是合法的，所以能被遵循规范的浏览器和解析器解析。表达式模版中不仅仅可以进行简单的数据绑定操作，我们还可以在模版中进行简单的表达式。我们也简单的叙述了模版编译的整个流程。 我们在上一篇说到如何把 Vue 实例中的数据显示到视图中，就会需要用到我们的模版，我们只是简单的使用了一些，模版其实还有很多其他的特性。今天我们就来看看模版的其他特性。 模...
摘要：如果一次判断的是多个元素，可以在内置的元素上使用条件指令，最终渲染的结果不会包含该元素。列表渲染也支持用代替作为分隔符，它更接近迭代器的语法的表达式支持一个可选参数作为当前项的索引。分隔符前的语句使用括号，第二项就是当前项的索引。 学习笔记：内置指令 内置指令 基本指令 v-cloak v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的d...
摘要：第二个是其值是或，确认是否深入监听。一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到第三个是其值是或，确认是否以当前的初始值执行的函数。混合定义来分发组件中的可复用功能结束，撒花文章已同步我的笔记，欢迎大家加，加后人生更加美好 vue.js记录 文章已同步我的github笔记https://github.com/ymblog/blog，欢迎大家加star~~，加star后...
摘要：示例了解一门语言，或者学习一门新技术，编写示例是我们的必经之路。分割线元素是否渲染在中，取决于前面使用的是还是指令。添加完对象后，重置对象删一个数组元素 Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 MVVM模式 下...
摘要：以及条件指令类似于里的，这三个指令根据表达式的值对组件进行渲染销毁。如果想一次性判断多个元素，可以将他们包裹在之内，使用条件指令操作外层的，并不会包含在最终的渲染结果中。要是不希望被复用，需要在指定的元素上添加值，值存在且唯一。 v-if、v-else-if、v-else以及v-show 条件指令v-if、v-else-if、v-else 类似于JavaScript里的if、else-...
阅读 1122·2021-11-24 09:39
阅读 3622·2021-09-02 15:21
阅读 2160·2021-08-24 10:01
阅读 721·2021-08-19 10:55
阅读 2446·2019-08-30 15:55
阅读 1211·2019-08-30 14:16
阅读 2991·2019-08-29 15:17
阅读 3234·2019-08-29 13:53
