Vue filters用法(数据过滤、数据格式化)
Vue filters用法(数据过滤、数据格式化)当待展示的文本信息过长时,我们需要对数据进行格式化过滤。
·
示例:

当待展示的文本信息过长时,我们需要对数据进行格式化过滤。

filters用法:
1、在script中filters下添加一个自定义的处理函数

2、在数据变量处,进行数据过滤

代码段附录:
<template>
<div >
<div class="PosContent">
{{content | contentFormat}}
</div>
<div class="PosButton">
详情
</div>
</div>
</template>
<script>
export default {
name: 'Empty',
props: {
// soft: String,
data2: {},
},
data () {
return {
visible: true,
content: 'easyIcon是一款简单易用的Icon制作工具,助您快速制作所需Icon (操作简便,拖拽进入,一键导出)。软件下载 http://scimence.cn/soft/easyicon/easyIcon.exe easyIcon是一款简单易用的Icon制作工具,助您快速制作所需Icon (操作简便,拖拽进入,一键导出)',
}
},
filters: {
contentFormat(content)
{
if(content.length > 56)
{
return content.substring(0, 56) + '...';
}
else return content;
},
// 取content后len位 调用如: tail(6)
tail(content, len) {
if (content.length > len) {
return ".." + content.substring(content.length - len, content.length + 1);
} else return content;
},
// 取content前len位 调用如: head(3)
head(content, len) {
if (content.length > len) {
return content.substring(0, len) + "..";
} else return content;
}
},
mounted() {
},
created() {
},
methods: {
}
}
</script>
<style scoped>
</style>
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐



所有评论(0)