这是通过过滤器写的一个只显示10个字的效果图。
1）：什么时候用到过滤器？
绑定一些复杂数据类型的时候用到过滤器
2）：以下两种方式定义过滤器：
第一种：Vue.filter()定义全局过滤器（不举例子）
******注意全局方法Vue.filter()定义的过滤器之前要先创建vue实例
第二种：用filters选项定义本地过滤器(详细例子和代码)
<li><span>A:</span>{{content | subStr}}</li>里面的subStr是过滤器的名字
而且多个过滤器可以串联使用
<span>{{str | lowercase | firstUppercase}}</span>下面是一个用第二种方法写的：用filters选项定义本地过滤器(详细例子和代码)
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><style>li {font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-weight: 800;}</style><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div id="app"><h4>只显示10个字的本文小Demo</h4><ul><li><span>A:</span>{{content1 | subStr}}</li><li><span>B:</span>{{content2 | subStr}}</li><li><span>C:</span>{{content3 | subStr}}</li><li><span>D:</span>{{content4 | subStr}}</li><li><span>E:</span>{{content5 | subStr}}</li></ul></div><script>var demo = new Vue({el: "#app",data: {content1: "读书不误砍柴功",content2: "读完硕士再打工",content3: "读书不误砍柴功，读完硕士再打工",content4: "这一行文字同样会超过10个字滴滴滴滴滴滴滴",content5: "ABCDEFGHIJKLMN",},filters: {subStr: function(value) {if (value.length > 10) {//如果字串长度大于10return value.substr(0, 10) + "...";//返回前10个字符} else {return value;}}}})</script> </body></html>
