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

内置指令

指令名称描述使用
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:是要过滤的值
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值