vue 过滤器基本用法以及封装过滤器

最新推荐文章于 2023-03-01 23:26:30 发布

zeke_x

最新推荐文章于 2023-03-01 23:26:30 发布

阅读量346

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_41997724/article/details/87271752

版权

Vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

vue 过滤器基本用法

理解：不改变data的数据格式，在界面显示处理后的数据格式

比如：对数组中的日期进行截取

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <table >
        <tr v-for="item in list">
            <td>{{item.name | filter}}</td>
        </tr>
    </table>
</div>
<script>
    var vm =  new Vue({
        el: '#app',
        data: {
            list:[{'name':'2019-02-08TT00:00'},
                {'name':'2019-02-09TT01:00'},
                {'name':'2019-02-10TT02:00'},
                {'name':'2019-02-11TT03:00'}
            ]
        },
        filters:{
            filter(value){
                return value.match(/(\S*)TT/)[1]
            }
        }
    })
</script>
</body>
</html>

封装过滤器filter如下：

在vue-cli脚手架里面的src文件下面的components中创建一个filter.js文件:
然后在filter里面写入过滤器方法:

//过滤器
function formatStata(status) {
  const statusMap = {
    1: '一般级',
    2: '较重要级',
    3: '重要级',
    4: '关键级',
  };
  return statusMap[status]
}
function statusColor(status){
  const statusMap = {
    1: '#07B3A1',
    2: '#FFB902',
    3: '#F4823F',
    4: '#F43F3F',
  };
  return 'background: '+statusMap[status]
}
function  statusColors(status){
  const statusMaps = {
    '一般级': '#07B3A1',
    "较重要级": '#FFB902',
    "重要级": '#F4823F',
    "关键级": '#F43F3F',
  };
  return 'background: '+statusMaps[status]
}



export { formatStata, statusColor ,statusColors };

在main.js文件中：

// 全局注册过滤器
import * as filters from './components/filter.js';
  // console.log(filters[key]);
Object.keys(filters).forEach((key) => {
  Vue.filter(key, filters[key]);
});

然后就可以在全局使用过滤器了：

{{scope.row.fileSensitiveLevel | formatStata}}

zeke_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 过滤器基本用法以及封装过滤器

vue 过滤器基本用法理解：不改变data的数据格式，在界面显示处理后的数据格式比如：对数组中的日期进行截取整体代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&g
复制链接

扫一扫