Vue中展示中文名称

news2024/11/17 10:02:39

          我今天调用接口时发现列表展示的楼栋一直是数字,并不是它的中文名称;但是点击编辑获取所属楼栋的下拉框中,又为中文名称,当我选中B栋点击修改之后又变成了B栋对应数字;然后我写了一个根据楼栋id获取对应的中文方法,然而还是不行。后来我左思右想才恍然大悟,可能是传入的类型不相符。果真,后端给我传递的是Int型,然后我前端这边传入的是字符串,故一直不显示中文。

        这个呢,其实也好解决,下面这段代码是一个遍历 this.data 数组中所有元素的过程,然后对每个元素进行操作。主要是,对于数组中的每个元素,将其 towerId 属性转换为数字类型,并重新赋值给 towerId 属性。这样写的一个好处是,原始数组 this.data 的值不会受到影响。

 this.data.map(item=>{
      item.towerId = Number(item.towerId)
 })

效果展示:


 拓展:

        那么,在uView中列表如何展示所属楼栋的中文名称呢?

首先呢,要在页面上写 获取所属楼栋的方法,然后打印输出看是否能获取到楼栋信息;

<script>
	import * as api from '@/request';
	export default {
		name: 'index',
		data() {
			return {
				towerList:[],
			};
		},
		onLoad() {
			this.getTowerAll()
		},
		methods: {
			//获取所属楼栋
		    async getTowerAll() {
				let params = {
					data: {},
					pageNum: 1,
					pageSize: 1000
				};
			 	await api.getTowerAll(params).then(res => {
					if (res.code === 0) {
						this.towerList = res.data.list
						console.log("楼栋tower:",this.towerList)
					}
				});
			},
		}
	};
</script>

   在控制台,可以看到楼栋信息的列表已经有了,那么现在就是要解决怎么把 ‘B栋’ 给显示出来 

  很显然,如果我们直接使用 {{item.towerId}},显示的还是数字,所以我们还要写一个根据楼栋ID获取楼栋的中文名称的方法

<u-cell-group class="font">
   <u-cell v-for="(item, index) in data" :key="index" :title="'姓名:'+item.name" >
	  <template slot='label'>
		  <view>负责楼栋:{{item.towerId}}</view>
	  </template>
   </u-cell>
</u-cell-group>

页面展示的还是楼栋Id: 

 

       以下这段代码的作用是:定义一个局部变量 towerName遍历 this.towerList 数组中的数据,寻找 towerId 属性等于传入的 towerId 的数据。并将其对应的 name 属性值赋值给 towerName 变量。最后返回 towerName 变量的值。

//根据楼栋id获取楼栋中文名称
getTowerName(towerId){
   let towerName = ''
   this.towerList.map(item=>{
	    if(item.towerId = towerId){
			towerName = item.name
		}
   })
   return towerName
},
<view>负责楼栋:{{getTowerName(item.towerId)}}</view>

 最终效果展示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/548692.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

栈与队列的对决:用队列实现栈的2种思路

本篇博客会讲解力扣“225. 用队列实现栈”的解题思路&#xff0c;这是题目链接。 先来审题&#xff1a; 以下是输出示例&#xff1a; 以下是提示和进阶&#xff1a; 这道题有2种思路&#xff0c;分别使用2个和1个队列来实现栈。 准备工作 先来实现队列。由于本篇博客的…

一步一步详解LSTM网络【从RNN到LSTM到GRU等,直至attention】

一步一步详解LSTM网络【从RNN到LSTM到GRU等&#xff0c;直至attention】 0、前言1、Recurrent Neural Networks循环神经网络2、The Problem of Long-Term Dependencies长期依赖的问题3、LSTM Networks4、The Core Idea Behind LSTMs5、Step-by-Step LSTM Walk Through6、Varian…

Linux--进程(一篇博客让你理解操作系统的底层)

Linux–进程 本篇博客讲开始进入进程模块&#xff0c;我们先从冯诺依曼的体系结构和操作系统讲起&#xff0c;由浅入深&#xff0c;先梳理一个Linux相关知识体系框架~ 进程目录 Linux--进程一、冯诺依曼体系结构1.1外围设备1.2中央处理器(CPU)1.3存储器(内存)1.3.1什么是内存&a…

【LeetCode20】有效的括号——图解

​ 你好&#xff0c;欢迎来到我的博客&#xff01;作为一名程序员&#xff0c;我经常刷LeetCode题目来提升自己的编程能力。在我的博客里&#xff0c;我会分享一些我自己做过的题目和解题思路&#xff0c;希望能够帮助到大家。今天&#xff0c;我想和大家分享一道挑战性较高的题…

【Java校招面试】实战面经(三)

目录 前言一、简历中项目的难点及解决方案二、讲讲分布式锁的实现三、AQS(Abstract Queued Synchronizer)的原理四、ConcurrentHashMap的原理五、MySQL InnoDB存储引擎中的MVCC解决了什么问题&#xff0c;MVCC的实现原理六、平时怎么创建线程&#xff1f;为什么用线程池&#x…

Red Hat Enterprise Linux (RHEL) 8.8 正式版发布

红帽企业 Linux 8.8 发布 Red Hat Enterprise Linux (RHEL) 8.8 (x86_64, aarch64) Release 请访问原文链接&#xff1a;https://sysin.org/blog/rhel-8/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org 2023年 5月 16日&…

Java学习路线(5)——数组

一、数组的概念 数组是用来存储一系列同类型数据的内存区域。 二、存储数据 1、静态初始化数组 作用&#xff1a; 定义数组时直接赋值。 格式&#xff1a; 【数据类型[] 变量名 new 数据类型[]{值1,值2…,值n}】 示例&#xff1a; double[] height {172.5,170.1,145.1,152.5,…

java常用工具之Scanner类

目录 简介一、扫描控制台输入1.1nextLine1.2nextInt1.3其他方法 二、扫描文件三、查找匹配项四、小结 简介 Java 的 Scanner 类是一个方便在控制台扫描用户输入的工具类&#xff0c;虽然它也可以扫描文件内容&#xff0c;但我们通常更喜欢它扮演前面的角色&#xff0c;因为扫描…

Flink第五章:处理函数

系列文章目录 Flink第一章:环境搭建 Flink第二章:基本操作. Flink第三章:基本操作(二) Flink第四章:水位线和窗口 Flink第五章:处理函数 文章目录 系列文章目录前言一、基本处理函数(ProcessFunction)二、按键分区处理函数&#xff08;KeyedProcessFunction&#xff09;1.处理…

【Linux进阶之路】基本权限的理解

文章目录 一.用户1.分类2.su3.su-4.sudo 二.文件1.文件分类2.文件权限3.文件权限的身份4.chmod——改写文件权限第一种方式第二种方式 5.chown——改写文件拥有者身份6.chgrp ——改写文件所属组身份7.umask ——设置权限掩码8.目录权限9.粘滞位——特殊的可执行权限 一.用户 …

关于Markdown文件的处理【笔记】

关于Markdown文件的处理【笔记】 前言推荐关于Markdown文件的处理一、md文件转word文档1 准备2 打开3 转为word文档4 导出结果5 打开 二、word文档转md文件1 准备2 导入3 打开4 显示图片5 打开 三、导入到CSDN中1 选择导入2 查看 四、导入设置1 前言2 导入设置3 修改配置 最后 …

ES6之生成器

文章目录 前言一、生成器是什么&#xff1f;二、生成器总结 前言 生成器 一、生成器是什么&#xff1f; 生成器就是一个特殊的函数&#xff0c;实现异步编程。格式function *名称(){...} (这个*靠近function写&#xff0c;靠近名称写&#xff0c;或者两边空格都不靠近均正确)…

[比赛简介]Parkinson‘s Freezing of Gait Prediction

比赛链接&#xff1a;https://www.kaggle.com/competitions/tlvmc-parkinsons-freezing-gait-prediction 比赛简介 本次比赛的目标是检测步态冻结&#xff08;FOG&#xff09;&#xff0c;这是一种使人衰弱的症状&#xff0c;困扰着许多帕金森病患者。您将开发一个机器学习…

YOLO V3 SPP ultralytics 第三节:关于yolo 中cfg的网络配置信息和读取cfg配置文件

目录 1. 介绍 2. 关于yolo的cfg网络配置文件 2.1 关于卷积层 2.2 关于池化层 2.3 关于捷径分支shortcut 2.4 关于route 层 2.5 关于上采样层 2.6 关于yolo层 3. 解析cfg 文件 4. 代码 1. 介绍 根据 第二节 的步骤&#xff0c;生成了属于自己的 my_yolov3.cfg 配置…

Python 墨西哥湾流(gulf stream)可视化

背景介绍 墨西哥湾流和黑潮分别是北半球两支强大的西边界流&#xff0c;墨西哥湾流的流速还要强于黑潮&#xff0c;也是温盐环流的重要组成部分。 引入涡度的概念&#xff0c;将涡度分为两个部分&#xff1a; 1、行星涡度&#xff0c;记为 f f f&#xff0c;与地球自转有关…

【软考数据库】第十四章 数据库主流应用技术

目录 14.1 分布式数据库 14.2 Web与数据库 14.3 XML与数据库 14.4 面向对象数据库 14.5 大数据与数据库 14.6 NewSQL 前言&#xff1a; 笔记来自《文老师软考数据库》教材精讲&#xff0c;精讲视频在b站&#xff0c;某宝都可以找到&#xff0c;个人感觉通俗易懂。 14.1 …

Springcloud1---->openFeign

目录 简介快速入门导入依赖开启Feign配置Feign客户端接口Feign使用小结feign feign配置负载均衡feign配置Hystix支持 简介 Feign可以把Rest的请求进行隐藏&#xff0c;伪装成类似SpringMVC的Controller一样。你不用再自己拼接url&#xff0c;拼接参数等等操作&#xff0c;一切…

WebSocket 详解,以及用QWebSocket 实现服务端和客户端(含代码例子)

目录 1、WebSocket 诞生背景 2、WebSocket的特点&#xff1a; 3、 WebSocket 简介 4、WebSocket 优点 5、QWebSocket通讯—客户端&#xff1a; 6、QWebSocket通讯—服务端&#xff1a; 1、WebSocket 诞生背景 早期&#xff0c;很多网站为了实现推送技术&#xff0c;所用的技术都…

初始Linux发展

目录 前言 Linux概念&#xff1a; 一.Linux发展历史 二.Linux的发展现状 三.发行版本 四.Linux 环境的搭建方式 主要有三种 : 4.6下载方式&#xff1a; 五.XShell软件 前言 Linux概念&#xff1a; Linux&#xff0c;全称GNU/Linux&#xff0c;是一套免费使用和自由传播的…

python中的对象和变量的关系

这里写目录标题 对象简介对象的结构变量和对象 对象简介 Python是一门面向对象的编程语言&#xff01; 一切皆对象&#xff01; 程序运行当中&#xff0c;所有的数据都是存储到内存当中然后再运行的&#xff01; 对象就是内存中专门用来存储指定数据的一块区域 对象实际上就是…