vue 基本指令:
v-cloak : 一般被用在网速较慢,Vue还没有加载完成时,不过当Vue创建实例后内容就会被替换掉, 并且屏幕会有一点闪动,
使用时最好配合的加一句CSS : [v-cloak]{ display:none;}
这个指令在小项目里有时会用,复杂的大项目会用其他的方法
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="a">a 为 true 显示</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>
除了数组外,可以遍历对象的属性:
输出效果:
遍历对象的时候可以选填两个参数: key 与 index
(js 部分跟上面一样,这里就不多打一遍了)
<div id="v1">
<p v-for="( v,key,index) in val">{{index}} - {{ key }} - {{ v }}</p>
</div>
输出效果: