示例: 

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

数据格式化过滤后


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>

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐