vue控制列表的字数限制

<template lang="pug">
  div.radar
      ul.radar__list
        li.radar__item(v-for="item in controlTextList" :id="item.id")
          img.img(:src="item.imgSrc")
          div.item
            p.title {{item.title}}
              span.icon(:style="{'background-image': 'url('+item.back+')'}")
            p.number
              span.browse {{item.browse}}
              span.click(:class="item.share?'share':''") {{item.share}}
            div.item-following(v-if="item.portraits.length > 0")
              div.portraits
                img.portrait(:src="portrait" v-for="portrait in item.portraits")
                span.numbers {{item.numbers}}
              RouterLink.view(:to="{name: 'browse-details'}") 查看

</template>

export default {
  name: 'test',
  data () {
    return {
      totalList: {
        totalViews: '2222',
        totalShare: '721',
        list: [ // 列表
          {
            id: 0,
            imgSrc: 'http://source.haichuanshiye.cn/upload/2019/06/12/201906125d009c9e00126887243520.jpg', // 左边img
            title: '踏上时间的列车往回忆边缘开穿过日升月落开往春去冬来我愿翻山越岭', // 标题
            browse: '22次', // 浏览次数
            share: true, // 是分享true,点击false
            shareNum: '22次', // 分享次数
            portraits: [ // 浏览人的头像
              'http://source.haichuanshiye.cn/upload/2018/10/16/201810165bc5453381b2c608749748.jpg',
              'http://source.haichuanshiye.cn/upload/2018/10/16/201810165bc5453381b2c608749748.jpg',
              'http://source.haichuanshiye.cn/upload/2018/10/16/201810165bc5453381b2c608749748.jpg'
            ],
            numbers: '等6人浏览', // 浏览量
            back: require('../../assets/icon/radar/yz.png')
          },
          {
            id: 1,
            imgSrc: 'http://source.haichuanshiye.cn/upload/2019/06/12/201906125d009c9e00126887243520.jpg',
            title: '踏上时间的列车往回忆边缘开',
            browse: '22次',
            share: false,
            shareNum: '2次',
            portraits: [
              'http://source.haichuanshiye.cn/upload/2018/10/16/201810165bc5453381b2c608749748.jpg',
              'http://source.haichuanshiye.cn/upload/2018/10/16/201810165bc5453381b2c608749748.jpg'
            ],
            numbers: '等6人浏览',
            back: require('../../assets/icon/radar/wd.png')
          },
          {
            id: 2,
            imgSrc: 'http://source.haichuanshiye.cn/upload/2019/06/12/201906125d009c9e00126887243520.jpg',
            title: '我愿翻山越岭',
            browse: '22次',
            share: true,
            shareNum: '222次',
            portraits: [
              'http://source.haichuanshiye.cn/upload/2018/10/16/201810165bc5453381b2c608749748.jpg'
            ],
            numbers: '等6人浏览',
            back: require('../../assets/icon/radar/tg-xcx.png')
          },
          {
            id: 3,
            imgSrc: 'http://source.haichuanshiye.cn/upload/2019/06/12/201906125d009c9e00126887243520.jpg',
            title: '只为遇见你只为遇见你只为遇见你只为遇见你只为遇见你只为遇见你只为遇见你',
            browse: '22次',
            share: false,
            shareNum: '22222次',
            portraits: [],
            numbers: '等6人浏览',
            back: require('../../assets/icon/radar/tg-sp.png')
          }
        ]
      }
    }
  },
  created () {
    this.sortCurrent = 'all'
  },
  computed: {
    // 限制标题17个字后面的点点 
    controlTextList () {
      let list = this.totalList.list
      list.forEach((item, index) => {
        if (item.title.length > 17) { // 限制字数17个字
          list[index].title = item.title.slice(0, 17) + '...'
        }
      })
      return this.totalList.list
    }
  },
  methods: {
    
  }
}