Vue框架整理：vue.js内置指令 v-if、v-for 、v-show 处理加载时闪动未处理的数据

vue 基本指令：

v-cloak : 一般被用在网速较慢，Vue还没有加载完成时，不过当Vue创建实例后内容就会被替换掉， 并且屏幕会有一点闪动， 使用时最好配合的加一句CSS : [v-cloak]{ display:none;} 这个指令在小项目里有时会用，复杂的大项目会用其他的方法

（有时v-clock 也不能很好的处理闪动问题，建议可以自己手写，在显示的元素上添加一个自定义的类名或者ID，css中隐藏，编辑JS时 在页面加载完成后将元素显示：）

v-once :主要用于它的元素或组件只能被渲染一次，包括他所有的后代元素，渲染成功后，不会再变化

示例代码：

    
{{ txt1 }}

    
{{ txt2 }}

条件渲染指令：

v-if v-else-if v-else
类似于JS的if 判断，不过写在JS中的代码会直接判断后在渲染，这里会根据我们的需求渲染引号""中值为true的内容，销毁其他的元素

    
 a 为 false 显示

    
 a 为2 显示

    
  其他  显示

v-show :
与v-if 比较类似的用法，不过v-if判断是通过判断决定渲染哪一条，v-show不论条件判断都会渲染元素，只是判断结果为false的通过CSS的display:none 来隐藏

    
 a 为 true 显示
    
 a 为 false 显示

循环指令：

v-for： 显示的数据需要循环显示时需要用到这个

或者也可以用of代替in作为分隔符，另外，v-for也可以放在内置标签 template 上，例如：

除了数组外，可以遍历对象的属性：

    
{{ v }}

输出效果：

遍历对象的时候可以选填两个参数： key 与 index
(js 部分跟上面一样，这里就不多打一遍了)

    
{{index}} - {{ key }} - {{ v }}

输出效果：