vue中computed计算属性传入参数

vue中computed计算属性传入参数使用 JavaScript 闭包 进行传值操作 computed 控制显示的内容 computedTxt returnfuncti value returnthis methodGetByt value 20 做一个简单的功能 使用计算属性判断传入的

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

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; }
 
  
  • { {computedTxt(item.title)}}
    { {item.time}}

还可以使用filters 过滤器。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/211384.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月18日 下午10:33
下一篇 2026年3月18日 下午10:34


相关推荐

  • 不用折腾部署 OpenClaw,我用 MiniMax Agent 一键养「龙虾」,还拍了个短剧

    不用折腾部署 OpenClaw,我用 MiniMax Agent 一键养「龙虾」,还拍了个短剧

    2026年3月13日
    3
  • Python安装失败_python第三方库安装失败

    Python安装失败_python第三方库安装失败详细内容相信很多刚开始入门Python的菜鸟们在安装python第三方库的时候,多多少少都会遇到一些安装失败的问题。下面,我将结合自身经验,分享一下在windows操作系统上此类问题的解决办法。一、清楚自己所安装的python版本(2.7或3.6,andmore);(推荐学习:Python视频教程)二、检查是否安装了pip,pip版本是否可以使用;三、网络是否正常;如果确认上面都没有问题的话,就…

    2022年10月2日
    8
  • java编译报错提示编码gbk的不可映射字符啥意思_解决java编译错误:编码GBK的不可映射字符…

    java编译报错提示编码gbk的不可映射字符啥意思_解决java编译错误:编码GBK的不可映射字符…我的 Android 进阶之旅 解决 AndroidStudi 运行 gradle 命令时报错 错误 编码 GBK 的不可映射字符 1 问题描述最近在负责公司基础业务和移动基础设施的开发工作 正在负责 Lint 代码静态检查工作 因此编写了自定义的 Lint 规则 在调试过程中 编译的时候出现了如下所示的错误 部分输出日志如下所示 Java 文件编译出现 amp a

    2026年3月17日
    2
  • 嵌入式学习步骤[通俗易懂]

    嵌入式学习步骤[通俗易懂]作者:李Brooks链接:https://www.zhihu.com/question/22252234/answer/75026117来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。占坑先。——————————————————————-第一次修改咯。不请自来。做电赛…

    2022年5月1日
    53
  • 2021-09-27 网安实验-取证分析-数字取证之Bulk_extractor

    2021-09-27 网安实验-取证分析-数字取证之Bulk_extractorBulk extractor 一个计算机取证工具 可以扫描磁盘映像 文件 文件目录 并在不解析文件系统或文件系统结构的情况下提取有用的信息 由于其忽略了文件系统结构 程序在速度和深入程度上都有了很大的提高在前面的实验中我们可以看到 foremost 和 scalpel 是比较有效的文件恢复和提取的工具 但是仅限于几种特定的类型 为了进一步的提取数据 我们可以使用 Bulk exetractor 除了 foremost scalpel 能提取的恢复 提取的数据外 Bulk exetractor 还可以提取的数据包括 信用

    2026年3月18日
    2
  • 傅盛的openclaw龙虾养成日记,我彻底搞懂了

    傅盛的openclaw龙虾养成日记,我彻底搞懂了

    2026年3月13日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号