内置指令
指令名称 |
描述 |
使用 |
v-model |
绑定数据 |
<\input v-model="message"> |
v-text |
输出文本,不能解析标签 |
<\p v-text="message"></p> |
v-html |
输出文本,可解析标签 |
<\p v-html="message">/p> |
v-once |
只绑定一次数据 |
<\p v-once >{{message}}</p> |
v-bind |
绑定属性 |
<\img v-bind:src="imgurl"> 或 <\img :src="imgurl"> |
v-if |
控制是否显示容器 值转为布尔为false时 注释该容器,反之显示 |
<\div v-if="true"></div> |
v-show |
控制是否显容器,改变的时display:none/block |
<\div v-show="true"></diiv> |
v-for |
循环遍历数组、对象 |
<\li v-for="(val,key) in arr">{{val}}</li> |
v-cloak |
在还没有执行到vue代码的时候隐藏元素,可解决‘闪烁’问题 |
<\p v-cloak>{{message}}</p> |
自定义指令
注意:要把自定义指令写在new Vue()的前面
Vue.directive('指令名称',function(element,bind){
element: 指令使用所在的元素
bind:是一个对象,bind.value可以获取指令的参数
})
使用:<p v-指令名称=“'red'”></p> 这里的red就是bind.value
自定义过滤器
在vue2.0版本中没有自带的过滤器,要使用过滤器要自己定义
注意:要把自定义过滤器写在new Vue()的前面
Vue.filter('date',function(value){
console.log(value)
var mydate = new Date(value);
var y = mydate.getFullYear();
var m = mydate.getMonth();
var d = mydate.getDate();
return y +'/'+ m +'/'+ d;
})
date:就是过滤器的名称
参数value:是要过滤的值