vue中computed计算属性传入参数

亦凉 2022-05-14 03:22 421阅读 0赞

将计算属性的返回值改为函数，再进行传值操作。

computed: {
          // 控制显示的内容
          computedTxt() {
            return function(value) {
              return this.methodGetByteLen(value, 20)
            }
          }
    }

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

/**
           * 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;
        }

<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 过滤器。