您的位置：首页 > 产品设计 > UI/UE

vue内置指令、自定义指令及自定义过滤器

2017-10-24 15:58 579 查看

内置指令


指令名称	描述	使用
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：是要过滤的值

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航