VUE 过滤器
VUE 过滤器
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
过滤器的定义
如下
<script src="https://unpkg.com/vue/dist/vue.js"></script>
在直接引入vue.js 的页面中
1.在Vue定义之前，先定义一个全局过滤器
Vue.filter('capitalize', function (value)
{
if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1)
}
)
new Vue({ // ... })
2.定义一个局部的过滤器
new Vue({
filters: {
capitalize: function (value) {
if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
3.在vue 项目中定义一个过滤器
filters: {
dateForm: function (value) {
var das = new Date(value)
console.log(das)
console.log(das.getMonth())
let Y = das.getFullYear()
let M = das.getMonth() + 1
if (M < 10) {
M = ('0' + M)
}
let D = das.getDay()
if (D < 10) {
D = ('0' + D)
}
return (Y + '年' + M + '月' + D + '日')
}
}
过滤器的引用：
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
在el-table-column中
<el-table-column label="状态" align="center" prop="status">
<template scope="scope">
{{scope.row.status | baseStateFilter}}
</template>
</el-table-column>
