关于实现 Vue 动态数据显示,比如数字 0 或 1 怎么显示为 男 或 女等等的动态显示实现方法

这篇具有很好参考价值的文章主要介绍了关于实现 Vue 动态数据显示,比如数字 0 或 1 怎么显示为 男 或 女等等的动态显示实现方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

具体 Vue 代码演示:

test.vue 文件演示:

<template>
<!--   方法一    -->
<div>
        {{ test.data === 0 ? '男' : '女'}}

</div>

<!--   方法二    -->
<div>
        {{ test.data === 0 ? '男' : ''}}
        {{ test.data === 1 ? '女' : ''}}
        {{ test.data === 2 ? 'xxx' : ''}}
</div>

</template>

以上关于数据 test.data 是数字格式的动态数据显示,有两种实现方法可以实现,方法二的灵活性比较好(比较推荐)


参考链接

1. Vue中动态展示数据的字典项文章来源地址https://www.toymoban.com/news/detail-708231.html

到了这里,关于关于实现 Vue 动态数据显示,比如数字 0 或 1 怎么显示为 男 或 女等等的动态显示实现方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ESP32--- OLDE动态数字显示

    动态数字显示 从逻辑上来说,就是绘制一个实心方块,遮挡上一次绘制的内容,然后再绘制这一次的。 //动画数字效果 函数如下 显示效果:数字递增变化,同时对应这直线增加 void dynamicNum(int x, int y, int num) { int i; for (i = 0; i num; i++) { u8g2.setDrawColor(0); u8g2.drawBox(x, 10, 60, 60);

    2024年02月08日
    浏览(22)
  • el-table 实现动态表头 静态内容 根据数据显示动态输入框

    直接放代码了

    2024年02月12日
    浏览(34)
  • 通过easyui实现动态控制表格字段显示、导出表格数据

    学过layui前端框架的都知道,layui默认帮我们实现了控制表格字段显示以及数据的导出功能。 1、控制表格字段显示 2、数据导出 导出为excel 导出为pdf 导出按钮的右边那个按钮就是打印pdf的 那么,easyui要怎么实现这些功能呢?这篇文章就要介绍一下怎么通过前端实现表格数据

    2024年02月14日
    浏览(29)
  • Python-使用matplotlib.pyplot实现实时数据动态显示

    目录 一、引言 二、从一块代码开始 1、%matplotlib qt5 2、plt.icon 三、另一种在行内(Jupyter Notebook内)展示动态图形的方法 1、display和display.clear_output() 用python做仿真一个痛点就是不能像netlogo等一些其他软件可以很方便地实现实时数据可视化,也正是由于这一点,调试仿真系统时

    2024年02月14日
    浏览(25)
  • 关于微信小程序中如何实现数据可视化-echarts动态渲染

    移动端设备中,难免会涉及到数据的可视化展示、数据统计等等,本篇主要讲解原生微信小程序中嵌入 echarts 并进行动态渲染,实现数据可视化功能。 基础使用 首先在 GitHub 上下载 echarts 包 地址:https://github.com/ecomfe/echarts-for-weixin/tree/master 下载项目 解压压缩包,将 ec-canva

    2024年01月25日
    浏览(38)
  • Vue使用Element-table实现动态删除某行的操作(在删除后页面中不显示该行)

    点击删除按钮后,在数据库中删除该行并且在当前页面不刷新的情况下不显示该行 在点击删除后,将数据库中按照id删除该行以后,页面在不刷新的情况下还是显示着删除前的数据库中的数据。 可以将删除时传入该行row的index,再将展示的数据数组通过splice(index,1)方法截取。

    2024年02月15日
    浏览(36)
  • vue3 | 数据可视化实现数字滚动特效

    vue3不支持vue-count-to插件,无法使用vue-count-to实现数字动效,数字自动分割,vue-count-to主要针对vue2使用,vue3按照会报错: TypeError: Cannot read properties of undefined (reading \\\'_c\\\') 的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图: 使用Vue.component定义公

    2024年02月02日
    浏览(34)
  • Vue从后端取数据,实现动态路由

            将获取菜单的方法放在全局中,以便每次刷新页面时,能够加载出。 this.$store.state.userInfo 是登入后存放在Vuex的用户信息  按照上面要求即可实现

    2024年01月20日
    浏览(27)
  • 电脑怎么设置动态壁纸?关于Windows和Mac壁纸的设置方法

    为了让电脑桌面更加美观舒适,很多人都会给电脑的桌面设置自己喜欢的壁纸。 图片壁纸很多人都会设置,但是电脑怎么设置动态壁纸? 这是很多人的困扰。其实方法同样很简单,下面有关于Windows和Mac动态壁纸的设置方法,一起来看看! 操作环境: 演示机型:联想小新A

    2024年02月09日
    浏览(31)
  • C51单片机-共阳极数码管循环显示数字0至9,共阴极数码管循环显示5201314(动态)

    keil uVision4界面: proteus仿真界面:

    2024年02月06日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包