vue filter时间戳的转换 批量同一规则改动

vue filter的使用

写vue的时候遇到一个问题需要将时间戳转换成字符串显示在页面上

element ui table里面的数据直接可以用formatter来实现用来格式化其内容

<el-table-column prop="tUpdateTime" label="更新时间" :formatter="formatter" width="100"></el-table-column>

//js
formatter(row, column,cellValue) {
  let date = new Date(cellValue);
  let y = date.getFullYear();
  let MM = date.getMonth() + 1;
  MM = MM < 10 ? "0" + MM : MM;
  let d = date.getDate();
  d = d < 10 ? "0" + d : d;
  let h = date.getHours();
  h = h < 10 ? "0" + h : h;
  let m = date.getMinutes();
  m = m < 10 ? "0" + m : m;
  let s = date.getSeconds();
  s = s < 10 ? "0" + s : s;
  return y + "-" + MM + "-" + d + " " + h+":" + m + ":" + s;
},

---

页面里面确定个数单个的转换可以直接使用computed属性

<li v-show="haveal"><span class="blanking3">立案日期</span>{{aaa}}</li>

//js
computed: {
  aaa(){
    let date = new Date(this.tableRadio.cRegisterDate);
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? "0" + MM : MM;
    let d = date.getDate();
    d = d < 10 ? "0" + d : d;
    return y + "-" + MM + "-" + d + " ";
  }
},

---

但是面对后台的数组里面的 不定个数的转换 操作用computed解决不了
查了很久的资料发现可以使用vue自带的filter过滤器，使用十分简单

<li><span class="blanking1">时间</span>{{item.assignTime | time}}</li>
//和method同级
filters: {
  time(cellValue) {
    let date = new Date(cellValue);
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? "0" + MM : MM;
    let d = date.getDate();
    d = d < 10 ? "0" + d : d;
    let h = date.getHours();
    h = h < 10 ? "0" + h : h;
    let m = date.getMinutes();
    m = m < 10 ? "0" + m : m;
    let s = date.getSeconds();
    s = s < 10 ? "0" + s : s;
    return y + "-" + MM + "-" + d + " " + h+":" + m + ":" + s;
  },
}

---

---

---

vue filter的使用格式

vue中的过滤器分为两种：局部过滤器和全局过滤器

1.定义无参全局过滤器

<div id="app">
     <p>{{ msg | msgFormat}}</p>
</div>
<script>
	// 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
	Vue.filter('msgFormat', function(msg) {
		// 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
		return msg.replace(/单纯/g, 'xx')
	})
</script>

2.定义有参全局过滤器

<div id="app">
	<p>{{ msg | msgFormat('疯狂','--')}}</p>
</div>
<script>
	// 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
	Vue.filter('msgFormat', function(msg, arg, arg2) {
		// 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
		return msg.replace(/单纯/g, arg+arg2)
	})
</script>

3.局部过滤器

局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中。其作用的区域也是vue实例【#app】控制的区域

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    //定义私用局部过滤器。只能在当前 vue 对象中使用
    filters: {
        dataFormat(value) {
            return value+'Hello!';
        }
    }
});

注意：
1、 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右