如果字符超出 Vue.js 中的限制,则仅显示名称的一部分

2024-01-04

我试图在用户登录后显示一条消息。

如果字符数超过 8 个,如何仅显示名称的前 8 个字符,后跟“..”? (例如:蒙娜丽莎..)

new Vue({
    el: '#app',
    data: {
        username: 'AVERYLONGGGNAMMEEE'
    }
});

这是我的jsfiddle 演示 https://jsfiddle.net/inchrvndr/t2wm7qbh/


这是我的答案小提琴:答案演示 https://jsfiddle.net/inchrvndr/t2wm7qbh/3/

<div id="app">
  <div v-if="username.length<8">Welcome, {{ username }}</div>
  <div v-else>Welcome, {{ username.substring(0,8)+".." }}</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如果字符超出 Vue.js 中的限制,则仅显示名称的一部分 的相关文章

随机推荐

  • 在sql中转换excel百分位公式

    PERCENTILE C2 C11080 E2 E11080 G2 G11080 73 上面的公式是Excel百分位数公式 我想将其转换为SQL 11080是该列的计数 如果有人可以帮助我 那将会非常有帮助 我相信percentile co
  • PhoneGap 和 Cordova 之间的区别以及我们应该安装哪一个?

    我的任务是开发 Android 和 iOS 应用程序PhoneGap http phonegap com http phonegap com 然而 当我读到时 事情开始变得非常复杂 有些人说Cordova http cordova apac
  • 不支持 Hive 方法

    我正在尝试使用 Hive 作为底层数据存储来运行 SQl 查询 该查询调用 Big Decimal 函数并引发以下错误 不支持该方法 org apache hadoop hive jdbc HivePreparedStatement set
  • 以编程方式检测 Android 屏幕覆盖

    有没有办法让应用程序能够 检查其顶部是否存在屏幕覆盖层 以及 找出哪个包名称拥有覆盖层 我知道 Android M 及更高版本能够在权限页面中检测屏幕覆盖 并在检测到屏幕覆盖时拒绝权限更改 但开发人员是否能够在应用程序层实现相同的功能 您可
  • 在 Python 中随时插入解释器

    我知道如何使用口译员pdb and IPython 但这需要我事先确切地知道我想在哪里停止 然而 我经常运行需要几分钟到几小时的数字处理脚本 我想确切地知道它的进展情况 一种解决方案是简单地在各处放置大量日志记录语句 但随后我要么被太多信息
  • 数据库更新后nodejs自动刷新视图

    每次函数对数据库进行更改时 我想使用 nodeJS 刷新我的视图 如果我们以 MEAN stack 为例 我不想每 x 秒发送一个 http request 来检查数据库是否已进行更改 我希望前端能够自动收到通知 然后更新视图 这方面的最佳
  • clang 和 gcc 不实现 std::hardware_{constructive,virtual}_interference_size 的原因是什么?

    我知道答案可能是他们没有优先考虑它 但这确实感觉像是故意遗漏 他们已经拥有大量 C 20 核心语言 库功能 而这个 C 17 功能仍然没有实现 其实按照这个table https en cppreference com w cpp comp
  • 如何抑制Windows命令输出?

    我通过命令行移动数千个文件 并将所有文件名打印到控制台 有没有办法忽略输出以便它可以更快 类似于 Linux 中到 dev null 的管道 Thanks bla bla bla bla bla bla bla bla 2 gt nul
  • java泛型中的类型见证

    我从 Java 文档中的 Generics Trail 中看到什么是类型见证 BoxDemo
  • 如何在网格框中随机填充颜色

    如何在网格框中随机填充颜色 而不是如图所示有序 网格 http www freeimagehosting net uploads 4ed76557de jpg http www freeimagehosting net uploads 4e
  • 如何打印单个 JPanel 的内容?

    我有一个JPanel有两个带图片的标签 我需要打印这些内容JPanel 请帮帮我 我怎样才能只打印这个JPanel的内容 因为我的上也有不同的组件JFrame但我只需要打印this JPanel Thanks 下面是打印任何 Swing 组
  • 在打字稿中获取枚举键作为联合字符串的通用类型?

    考虑以下打字稿枚举 enum MyEnum A B C 如果我想要另一种类型 即该枚举键的联合字符串 我可以执行以下操作 type MyEnumKeysAsStrings keyof typeof MyEnum A B C 这非常有用 现在
  • 在 iOS 8 - iOS 11 中从操作表委托以模态方式呈现视图控制器

    所以我注意到在 iOS8 beta 3 中 Update 在 iPad 上的 iOS 11 2 中 当尝试从委托方法中呈现视图控制器时 仍然会发生这种情况UIActionSheet 什么也没发生 并且日志消息输出到调试控制台 表明在转换警报
  • Windows 7 计算机上的 WAMP Server 2 托盘图标中的菜单不可用

    我已在 Windows 7 计算机上下载并安装了 WAMP Server 版本 2 1d 当我从 开始 菜单中选择 启动 WAMP 服务器 时 会出现托盘图标 但没有任何功能 当我将鼠标悬停时 工具提示告诉我 2 个服务中的 1 个已启动
  • CakePHP 中的 .ctp 文件有何用途?

    我开始使用 CakePHP 并且正在阅读manual http book cakephp org view 57 Controller Methods 大约在页面的中间 有这样的评论 Render the element in views
  • 提交 HTML 表单后,servlet 操作出现在 URL 而不是 JSP 文件中

    我创建了一个简单的登录页面 如果用户输入正确的用户名和密码 页面将被重定向到成功页面 否则它将被重定向到索引页面 在登录页面中 我向 servlet 提供了表单提交操作 一旦 servlet 验证输入 它将分派到相应的 jsp 页面 我的问
  • Mule 流程:如何从 XML 文件中删除 BOM 标记

    我已经为 Mule 流程输入了复杂的大型 XML 文件 文件结束点 gt 字节数组到字符串 gt 分割器 gt 我有org xml sax SAXParseException 序言中不允许有内容当我尝试使用 Splitter 组件处理输入文
  • 如何拦截 WCF 错误并返回自定义响应?

    考虑以下非常基本的 WCF 服务实现 public enum TransactionStatus Success 0 Error 1 public class TransactionResponse public TransactionSt
  • 使用 MinGW 在 Windows 上构建 protobuf

    我一直在按照彼得的回答中的步骤进行如何使用 MinGW 在 Windows 中构建 Google 的 protobuf https stackoverflow com questions 9243816 how to build googl
  • 如果字符超出 Vue.js 中的限制,则仅显示名称的一部分

    我试图在用户登录后显示一条消息 如果字符数超过 8 个 如何仅显示名称的前 8 个字符 后跟 例如 蒙娜丽莎 new Vue el app data username AVERYLONGGGNAMMEEE 这是我的jsfiddle 演示 h