前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue中computed计算属性传入参数

vue中computed计算属性传入参数

作者头像
acoolgiser
发布2019-04-17 14:31:59
2.5K0
发布2019-04-17 14:31:59
举报
文章被收录于专栏:acoolgiser_zhuanlanacoolgiser_zhuanlan

使用JavaScript闭包,进行传值操作。

代码语言:javascript
复制
computed: {
      // 控制显示的内容
      computedTxt() {
        return function(value) {
          return this.methodGetByteLen(value, 20)
        }
      }
}

做一个简单的功能,使用计算属性判断传入的字符超过了20就去掉后面的字符在尾部添加。。。

代码语言:javascript
复制
/**
       * str 需要控制的字符串
       * len 字节的长度,如5个汉字,10个英文,输入参数就是10
       */
      methodGetByteLen(str, len) {
        //因为第一次进入时为空,所以此if进行拦截
        if (str === null || str === undefined || str == '') {
          return;
        }
        // 如果字节的长度小于控制的长度,那么直接返回
        if (this.computedCharLen(str) <= len) {
          return str
        }
        for (let i = Math.floor(len / 2); i < str.length; i++) {
          if (str.substr(0, i).replace(/[^\x00-\xff]/g, '01').length >= len) {
            return str.substr(0, Math.floor(i / 2) * 2) + '......'
          }
        }
      },
      // 获取字符的个数
      computedCharLen(str) {
        let realLength = 0, len = str.length, charCode = -1;
        for (let i = 0; i < len; i++) {
          charCode = str.charCodeAt(i);
          if (charCode >= 0 && charCode <= 128) realLength += 1;
          else realLength += 2;
        }
        return realLength;
    }
代码语言:javascript
复制
<ul class="r-list">
      <li v-for="(item,index,key) in result" :key="key">
        <div>{{computedTxt(item.title)}}</div>
        <div>{{item.time}}</div>
      </li>
    </ul>

还可以使用filters 过滤器  完美!!!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年09月01日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档