Vue根据数据库内容显示相应文字（纯前端）

最新推荐文章于 2024-05-28 17:33:08 发布
最新推荐文章于 2024-05-28 17:33:08 发布
阅读量3.7k 收藏 8
点赞数 4
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_33940108/article/details/108486494
版权

在这里插入图片描述
这里的check_result字段为盘点结果，0正常，1盘盈，2盘亏。前端按数字的含义显示。
初始状态：
在这里插入图片描述
最后一栏显示为数字，无法理解数字含义。


解决办法：
在这里插入图片描述
在columns:中对后台字段调用时加上判断即可，显示对应的值。dataIndex为数据库字段名。

在这里插入图片描述
字段也可以匹配
在这里插入图片描述

CV键都碎了
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
如何使用vue+element-ui将后台返回的int类型数字转化为汉字形式？
AcHEn的博客
09-17 3313
我们在工作中有时候后台查出来的一些数据是int类型，但是呢，渲染在页面上就不能单调的显示整数了，如何转换呢？ 因为项目用到的是Vue+element-ui，所以就贴一下Vue+element-ui的转化方法，其实代码都大差不差，也很简单。代码如下： <el-table-column label="状态" align="center" min-width="120"> <template slot-scope="scope"> <span v-if="
Vue实现后端数字转前端显示文字之字典翻译注解@Dict
ChuaWi98的博客
08-17 6236
效果图： 数据库设计 前端页面显示文字 功能说明： 字典翻译注解 @Dict ： 用于列表字段字典翻译，将数据库某一列的值按照字典配置翻译成对应的文字描述。（比如字段status存的值是1，会自动生成一个翻译字段 status_dictText 值是‘已付款’） 实现步骤： 1.配置数据字典 新增订单状态字典 2.订单实体属性上加注解 /**订单状态（0-未付款 1-已付款 2-退款中 3-已退款 4-已完成）*/ @Excel(name = "订单状态（0-未付款 1-已付款 2-退款中 3-已退
VUE3+TS+elementplus+Django+MySQL实现从数据库读取数据，显示在前端界面上
最新发布
xll_007的博客
05-28 2263
VUE3+TS+elementplus+Django+MySQL实现从数据库读取数据，显示在前端界面上。 前面通过VUE3和elementplus创建了一个table，，以及，使用前端的静态数据，显示在表格中。今天通过从后端获取数据来显示在表格上，后端数据通过Django创建models，然后通过navigatecat在数据库表里手动添加一些数据，然后通过前端接口来获取和显示。
(vue)前端将接口返回的数字转换为对应文字显示
nyf_unknow的博客
06-17 1878
(vue)
vue根据数字显示对应的文字状态
qq_46362865的博客
02-28 2931
vue根据数字显示对应的文字状态（三元运算符） vue三元运算符两个判断 <el-table-column :label="$t('siitservice.smartarkconfig.status')" prop="status" width="80" align="right" class-name="is-hidden-popoper"> <template slot-scope="scope"> {{scope.
vue前端界面 el-table将接口传入的数据转换成想要的文字显示
five_s的博客
09-07 1576
文章目录前言一、数字类型转换1. 在三元运算符中加入判断，以及嵌套实现2. 在data中定义一个map存储根据map的值来对应转换的数据3. 使用 :formatter 来进行数据转换。总结 前言 总结记录一下vue中的前端界面显示的技巧 一、数字类型转换 1. 在三元运算符中加入判断，以及嵌套实现 <el-table-column label="状态" prop="status" align="center" width="80px"> <template slot-
SpringBoot+Vue实现图片滑块和文字点击验证码
05-11
在本项目中，我们主要探讨如何使用SpringBoot和Vue.js技术栈实现一个具有图片滑块和文字点击验证功能的应用。这种验证方式常用于提高网站的安全性，防止恶意机器人或自动脚本进行非法操作。 首先，让我们关注...
文字编辑器应用项目
07-25
服务器端通常会有一个Servlet接收这些请求，处理数据（如保存到数据库），然后返回相应的响应。这种前后端分离的方式提高了系统的响应速度和用户体验。 4. **项目部署** 部署该文字编辑器应用项目，首先需要配置...
画廊显示，底端带文字
07-10
总结来说，"画廊显示，底端带文字"涉及的技术点包括HTML/CSS布局、JavaScript交互、前端框架的应用、响应式设计、数据库管理和API交互，以及图片优化和加载策略。这些技术共同作用，为用户提供了一个直观、互动且...
基于ssm+vue校园美食交流系统.zip
04-01
"基于SSM+Vue的校园美食交流系统"就是一个典型的例子，它整合了Java后端开发框架SSM（Spring、SpringMVC、MyBatis）和前端现代化框架Vue.js，旨在为学生提供一个便捷、丰富的美食信息分享和交流平台。本文将深入探讨...
PHP客服系统-vue客服聊天系统 v1.0.rar
11-12
最后，运行前端构建命令（如npm run build），将生成的静态资源部署到服务器的相应目录。 总的来说，"PHP客服系统-vue客服聊天系统 v1.0"是一个结合了强大后端处理能力和现代化前端用户体验设计的在线客服解决方案...
vue实现输入一位数字转汉字功能
10-15
主要介绍了vue实现输入一位数字转汉字功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
el-input根据后台返回的状态码显示对应的文字
Dcripple的博客
05-11 2936
el-input根据后台返回的状态码显示对应的文字
vue3搜索显示出对应的搜索结果，结果中与关键字对应的字体高亮
weixin_73098736的博客
04-23 224
【代码】vue3搜索显示出对应的搜索结果，结果中与关键字对应的字体高亮。
【VUE】前端传入id却显示id对应的名称
仰望的博客
09-22 2718
经常遇到修改界面会传入对应id，界面却要显示对应名称的情况，用如下代码可以实现。
VUE动态展示表格字段
.
03-02 3771
前言 最近叼毛产品让写个需求，动态展示表格字段，要求动态根据用户习惯保存，下次进页面展示以前的，还能再次选择。 思考 让用户选择展示那些字段 保存db 进页面先查询db 然后根据table 字段属性过滤 平时vue页面写的表格类型字段 columnsData: [ { title: '状态', width: 120, align: 'center',
sql查询出的数字结果换成对应文本 前端pipe管道解决，后端sql解决
weixin_41147129的博客
07-01 1489
在数据库里我们通常用数字表达不同的情况， 比如 1 喜欢 2不喜欢 3讨厌 但是在前端和保存下来的表格里面我们往往想看到对应的文本。 现在有两种方法来解决 1 后端sql语句解决 select A.STATUS, (CASE BAPP.STATUS WHEN 1 THEN '喜欢' WHEN 2 THEN '不喜欢' WHEN 3 THEN '讨厌' END) AS STATUSSTR, ...
vue中将后台返回的数字转换成对应的文字
weixin_66902855的博客
11-08 3726
在前后端交互的过程中经常会遇到的一个问题，就是后端返回的是数字，前端页面例如类别一栏里应展示文字，前端就必须把后端传的 0,1,2,3转化为文字展示在页面上。后台返回的数据利用里面的回调对数据进行解析即可，下面直接上代码。这样就可以在页面上显示了。
vue通过条件获取后台对应数据显示在表格
热门推荐
smilling sky的博客
05-23 3万+
先看运行结果： 正确结果图： 图1.运行界面图 图2.查询结果图 正确代码：（注:要想查看后台数据可以点击 https://www.easy-mock.com/mock/5ce57090f2fc446b5d8ffe18/blog/blogdata这个链接） < template> < div class=“show-examples”> < el-input p...
vue怎么将数据库中文字显示到前端
05-12
要将数据库中的文字显示到前端页面上，你需要通过后端接口将数据库中的数据取出来，然后将数据传递给前端页面。通常情况下，使用Vue.js框架的话，可以通过以下步骤实现： 1. 在后端编写一个接口，用来获取数据库中的数据。可以使用Node.js、Java、Python等语言来编写接口。 2. 在Vue.js中使用axios或者其他HTTP请求库来调用后端接口，获取数据库中的数据。 3. 在Vue.js中使用v-for指令来遍历获取到的数据，并将数据渲染到页面上。 下面是一个简单的示例代码： 后端接口示例（使用Node.js和Express框架）： ``` const express = require('express'); const app = express(); const mysql = require('mysql'); const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'password', database: 'your_database_name' }); app.get('/data', (req, res) => { connection.query('SELECT * FROM your_table_name', (error, results) => { if (error) { res.status(500).send(error); } else { res.send(results); } }); }); app.listen(3000, () => console.log('Server started on port 3000')); ``` Vue.js示例代码： ``` <template> <div> <ul> <li v-for="item in data" :key="item.id">{{ item.title }}</li> </ul> </div> </template> <script> import axios from 'axios'; export default { data() { return { data: [] }; }, created() { this.getData(); }, methods: { getData() { axios.get('/data').then(response => { this.data = response.data; }).catch(error => { console.log(error); }); } } }; </script> ``` 这段代码中通过axios发送了一个GET请求来获取后端接口返回的数据，然后使用v-for指令将数据渲染到页面上。需要注意的是，这只是一个简单的示例代码，实际开发中还需要按照具体需求进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值