将计算属性的返回值改为函数,再进行传值操作。
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 过滤器。