filters过滤器

这是通过过滤器写的一个只显示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) {//如果字串长度大于10
                        return value.substr(0, 10) + "...";//返回前10个字符
                    } else {
                        return value;
                    }
                }
            }
        })
    </script>
</body>

</html>

猜你喜欢