码迷,mamicode.com
首页 > 其他好文 > 详细

vue 过滤器用法

时间:2018-10-24 17:51:59      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:disable   bind   ret   cti   template   put   res   font   form   

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

1、在一个组件的选项中定义本地的过滤器:

  filters: {
    word36: function(value) {
      var result = value.substr(0,36) + "...";
      return result;
    }
  },

2、在创建 Vue 实例之前全局定义过滤器:

/** 时间戳转换 */
Vue.filter(‘dateFilter‘, function (value) {
  var d = new Date(input);
  var year = d.getFullYear();
  var month =
    d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
  var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
  var hour = d.getHours();
  var minutes =
    d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
  var seconds =
    d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
  return (
    year +
    "-" +
    month +
    "-" +
    day +
    " " +
    hour +
    ":" +
    minutes +
    ":" +
    seconds
  );
})
/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: {
    App
  },
  template: ‘<App/>‘
})

 

vue 过滤器用法

标签:disable   bind   ret   cti   template   put   res   font   form   

原文地址:https://www.cnblogs.com/miny-simp/p/9844586.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!