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

本文链接：https://blog.csdn.net/freedomVenly/article/details/80685006

这里写图片描述

vue 基本指令：

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

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

<script>
	//jQuery示例：       id:v1先用CSS设置为display:none
    $(document).ready(function () {
       $("#v1").css("display","block"); 
    });
</script>

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

示例代码：

<body>

<div id="v1">
    <p v-clock>{{ txt1 }}</p>

    <p v-once>{{ txt2 }}</p>

</div>

<script src="vue.min.js"></script>
<script>
    var app=new Vue({
        el:"#v1",
        data:{
            txt1:"基本指令1",
            txt2:"基本指令2"
        }
    })
</script>

这里写图片描述

条件渲染指令：

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

<div id="v1">

    <p v-if="!a"> a 为 false 显示</p>

    <p v-else-if="a==2"> a 为2 显示</p>

    <p v-else>  其他  显示</p>

</div>

<script>
	var app=new Vue({
        el:"#v1",
        data:{
            a:true
        }
    })
</script>

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


<div id="v1">
    <p v-show="a"> a 为 true 显示</p>
    <p v-show="!a"> a 为 false 显示</p>
</div>

<script>
	var app=new Vue({
        el:"#v1",
        data:{
            a:true
        }
    })
</script>

循环指令：

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

这里写图片描述

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


<div id="v1">
    <template v-for=" v of val">
        <p>{{v.id}} 、 {{v.name}}</p>
    </template>
</div>

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



<div id="v1">
    <p v-for="v in val">{{ v }}</p>
</div>

<script src="vue.min.js"></script>

<script>

    var app=new Vue({
        el:"#v1",
        data:{
            val:{
                name:"张三",
                age:"30"
            }
        }
    })
</script>

输出效果：

这里写图片描述

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


<div id="v1">
    <p v-for="( v,key,index) in val">{{index}} - {{ key }} - {{ v }}</p>
</div>

输出效果：
这里写图片描述

这里写图片描述