Vue.js入门系列(4)--常用指令2

JavaScript015

Vue.js入门系列(4)--常用指令2,第1张

  在上一章节中，我们了解了Vue中的常用指令，同样，在本章节中继续讲解Vue中常用的指令，并且这些指令是针对语句使用的

  用于条件性的渲染一块内容，只有当条件的返回值为真时，才会渲染该块的内容,一般默认值是true

当设置ok为false时，div没有被渲染到浏览器中。

   要注意的是，为变量赋值Boolean类型时，不能加引号，加了引号就是字符串类型，字符串类型永远都为真

  如果v-if的条件不满足，将跳转到v-else-if，而当所有的v-else-if条件都不满足时，将会跳转到v-else。v-else-if、v-esle相当于v-if的一个分支

  当为type赋值A或者B时，就会将A或者B的div渲染到浏览器中，当条件都不满足时，就会渲染最后一个div到浏览器中。

   要注意的是，v-else 元素要跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

  v-show指令也是用于根据条件显示元素的指令，不同的是 v-show不支持v-else和<template>元素 ，并且带有 v-show 的元素 始终会被渲染并保留在 DOM 中 ，只是简单地切换元素的 CSS 属性 display。

  当one赋值为真时，div就会显示在浏览器中，当one赋值为false时，div就会隐藏在浏览器中。

4.1 渲染元素

  ① v-if ：是 “真正 ”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

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

4.2 渲染条件

  ① v-if ：当条件结果为 假 时， 不对元素进行渲染 ，直到条件为 真 才将元素 渲染

  ② v-show： 不管初始条件是什么 ，都已经将 元素渲染 到浏览器中

4.3 运行条件

  ① v-if：更高的切换开销，适用在 运行时条件很少改变 的情况下

  ② v-show： 有更高的初始渲染开销。如果需要非常 频繁地切换 ，建议使用v-show

以上就是条件语句常用的四条指令：v-if，v-else-if，v-else，v-show

  在Vue中，for语句使用 v-for 的指令来操作，具体的结构如下：

  其中，site可以看做是某个特定的元素，而sites则是某个元素所在的集合，可以分成以下几类：

①通过对象的 属性 来迭代对象数据，其结构是： v-for =‘value in object’

② 通过 key-value 的方式迭代对象数据

5.1 基本指令

5.1.1 v-­cloak一般与display：none进行结合使用

作用：解决初始化慢导致页面闪动的最佳实践

5.1.2 v­-once

定义它的元素和组件只渲染一次

5.2 条件渲染指令

5.2.1 v­-if, v-­eles-­if ,v­-else

用法： 必须跟着屁股走

v-if后面的等号必须是布尔值

v-if的弊端 :

Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因此会出现乌龙

只会渲染变化的元素，也就是说，input元素被复用了