VUE 插值语法实现数字解析成对应字符串显示在界面

最新推荐文章于 2024-05-30 20:01:36 发布

原创最新推荐文章于 2024-05-30 20:01:36 发布 · 519 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种络筒机车位状态数据的解析方法，并展示了如何使用HTML插值语法显示这些状态。通过定义不同的业务类型和车位状态，实现了对车位信息的有效管理和展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

收到的数据

{"name": "络筒机大车位11","type": 1,"state": 0,"carid": "0", "materialid": "0","number": 0,"pointid": ""}

要解析成的数据

CarState:["空", "有车", "任务占用中"],
BusinessTypes: ["","络筒机大车位", "络筒机小车位", "细纱机大车位", "细纱机小车位", "大车缓存位", "小车缓存位", "泊车位", "充电位"],

html插值语法{{BusinessTypes[item.type]}}

<tr v-for="(item, index) in myTableData" :key="index">
    <td>{{item.name}}</td>
    <td>{{BusinessTypes[item.type]}}</td>
    <td>{{CarState[item.state]}}</td>
    <td>{{item.carid}}</td>
    <td>{{item.materialid}}</td>
    <td>{{item.number}}</td>
    <td>{{item.pointid}}</td>
    <td>
        <div class="myButton btnUpdate" @@click="showUpdate(item)">修改</div>
        <div class="myButton btnDel" @@click="delete_data(item.name)">删除</div>
    </td>
</tr>

界面效果