vue filters 过滤器

<template>
    <div class="content">
        <header class="tab_nav">
            <div v-for="(item,index) in tabNav" :key="index" @click = "selected(index, $event)" :class="{'active':item.active}">
                <img :src="item.imgUrl" alt="icon">
                <span>{{item.title}}</span>
            </div>
        </header>
        <main>
            <ul>
                <li v-for="item in articles">
                    <h5>{{item.title}}</h5>
                    <div>{{item.summary | readeMore(100, '...')}}</div>
                    <div><a :href="item.link"></a></div>
                </li>
            </ul>
        </main>
        <footer></footer>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tabNav:[
                    {title:'我参与的',active:true,imgUrl:'/src/images/index/participate.png'},
                    {title:'我发布的',active:false,imgUrl:'/src/images/index/publish.png'},
                    {title:'我抽奖的',active:false,imgUrl:'/src/images/index/luck_draw.png'},
                ],
                articles:[
                    {
                        title: 'CSS :focus-within',
                        summary: 'CSS的世界真是一个神奇的世界。可能众多前端开发者听说过:focus并未听说过:focus-within。那么:focus-within是什么鬼。这篇文章，我们就说说:focus-within这个东东。在CSS中:focus-within是一个伪类，现在已经被列入到CSS选择器中（CSS Level 4 selector）。他就像你知道的:focus或者:hover。:focus-within能非常方便处理获取焦点状态。当元素本身或其后代元素获得焦点时，:focus-within伪类的元素就会有效。',
                        link: '//www.w3cplus.com/css/focus-within.html'
                    },
                    {
                        title: '如何改变表单控件光标颜色',
                        summary: '表单大家应该不陌生，当然了，今天并不是来聊怎么做表单或者处理表单的样式网格。而是来聊聊怎么改变表单控件中光标的颜色。不知道在大家心中，表单控件的光标颜色是根据color属性来控制的。那么如果需要用CSS来改变表单控件，比如说input或者textarea元素的光标颜色，应该怎么处理呢？',
                        link: '//www.w3cplus.com/css/caret-color.html'
                    }
                ]
            }
        },
        methods: {
            selected: function(index) {
                this.tabNav.forEach(e => e.active = false);
                this.tabNav[index].active = true;
            }
        },
        filters: {
            readeMore:function(text, length, suffix){
                return text.substring(0, length) + suffix;
            }
        }
    }
</script>

<style scoped lang="less">
    .border{
        content: '';
        display: block;
        width: 1px;
        height: 1.5rem;
        background: #D9D9D9;
        position: absolute;
        top: 0.75rem;
    }
    .tab_nav{
        display: flex;
        width: 100%;
        height: 2.5rem;
        background: #fff;
        opacity: 0.5rem;
        &>div{
            height: 2.5rem;
            width: 33.33%;
            opacity: 0.5;
            text-align: center;
            &:nth-of-type(2) {
                position: relative;
                &::before{
                    .border;
                    left: 0;
                }
                &::after{
                    .border;
                    right: 0;
                }
            }
            &>img{
                width: 1rem;
                height: 1rem;
                display: block;
                margin:  0.5rem auto 0;
            }
            &>span{
                display: block;
                font-size: 0.5rem;
                color: #69728E;
                line-height: 0.8rem;
            }
        }
        &>div.active {
            color: #69728E;
            opacity: 1;
        }
    }

</style>