vue中computed计算属性传入参数

Posted 熬夜的小青年

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中computed计算属性传入参数相关的知识,希望对你有一定的参考价值。

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

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

以上是关于vue中computed计算属性传入参数的主要内容,如果未能解决你的问题,请参考以下文章

vue 计算属性中(computed)是这样传递参数的(一看就会的操作 超详细)

Vue: computed和watch

vue3中computed计算属性函数

vue之watch和计算属性computed

我可以在 Vue.Js 的计算属性中传递参数吗

Vue computed计算属性 理解