Vue简单字典使用

最新推荐文章于 2023-11-30 22:14:54 发布
最新推荐文章于 2023-11-30 22:14:54 发布
阅读量133 收藏 1
点赞数 1
文章标签： vue.js 前端 javascript ecmascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_strong_pig/article/details/132629514
版权

今天我写项目的时候就遇到了一个很多人都会遇到的问题，也不是问题吧，因为我是vue3的项目，就是你这里可能要显示星期几，但是后端反过来的数据是1-7，一一对应这种，这时候vue2可以使用过滤器，vue3的话，取巧可以用到简单的字典。

下面是一种最简单的字典使用

intraDay就是后端返回数字的字段， 因为他是0-6  所以直接取巧用下标完成了这个工作，只要是返回纯数字连串的其实都可以，用数组下标来搞出来。

还有一种清洗数据的方式

 这里我的birthday后端返回的是一个时间格式，2023-09-01这种的，而我的项目里，要把它变成2023年9月1日，如何实现呢？这里我用到了这种直接函数返回数据放在响应式模板中的方法，

直接编写一个函数，然后在响应式模板中将其带入，然后，返回这个数据，从而实现对数据进行清洗，达到自己的目的。

我的代码可能有点low，要加油！！！~ 

Web阿成
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
项目数据字典构建方法介绍
01-23
项目数据字典构建方法介绍,每个字段的简单说明
vue数据字典和全局方法的创建与使用
weixin_46194350的博客
04-07 824
vue数据字典和全局方法的创建与使用
使用vuex对后台请求的数据来实现字典管理和使用
weixin_44738844的博客
06-16 1347
这样就可以简单的实现将后端请求的数据存入vuex中且从vuex内取出数据，还不会重复请求获取数据字典接口。
vuex存储数据字典
weixin_42488377的博客
03-24 484
vuex存储数据字典
vue3中字典使用
qq_39536826的博客
08-01 717
vue3中字典使用
字典管理怎么使用，vue3项目使用若依的的字典管理模块
Frank_colo的博客
11-13 1180
在utils这个工具文件夹中的dict.js文件中，导入上面data.js文件中的getDicts函数。这个data.js文件主要是用来发关于字典管理的请求的，包括查询所有的字典数据，新增修改和删除。然后将这个函数添加到vue实例对象的原型对象上，这样所有的页面都能通过原型对象拿到这个函数。比如在页面的下拉选项中要用到的数据，是调用下面这个getDicts接口拿到数据。在api文件夹的系统文件system里面的dict文件夹里的data文件中。useDict()函数中的参数要和你的字典类型的值一致。
vue中数据字典dicts的说明和用法介绍
small red red的博客
11-24 4891
什么是若依框架：若依框架就是一个后台管理框架，主要使用技术在官网可查，这里简要叙述：主要技术分别是基于springboot、shiro、mybatis、Thymeleaf等，这个后台管理框架可以实现零代码开发，它能让我们大部分时间放在业务开发上面，节省一些不必要的时间，降低技术难度，与开发成本。一般来说，在Python中，字典用花括号 {}标识，键值之间用 冒号：分隔，键-值对之间使用 ， 分割。其中，@/utils/dict文件里面主要是数据字典的一些方法，对于字典数据，标签，原始数据的处理；
[vue 进阶] 关于dicts字典的用法
热门推荐
w4sevens的博客
12-07 1万+
记录我在学习若依框架中遇到的，前端vue结合dicts使用的过程，希望对大家有帮助
若依VUE数据字典使用
qq_34198305的博客
02-10 1090
解决生命周期加载无法找到getDicts方法。
Vue3&Element-plus编写一个简版的字典服务
最新发布
月色真美121的博客
11-30 399
之前公司有维护过一个内部的字典平台,基本步骤和页面如下。
使用VUE自定义组件封装数据字典实战
03-07
答案是可以用，但用起来比较繁琐，需要在页面加载的时候，调用后端API接口拿数据，在data中定义存放字典数据的变量，并且一个实体编辑页面，使用到字典属性往往不止一个，三五个也比较常见，这时候，需要定义多个...
vue-excel导入导出
03-27
简单的vue前端excel导入导出组件,结合element-ui.包含导出字段选择,导入字段校验。由于源码和项目结合使用，部分字典，校验工具类需要和自己项目做适配。 项目需要引入：script-loader，xlsx，file-saver，不懂可...
catch-admin-vue:catchAdmin vue版本
03-20
因为thinkphp的简单高效，文档齐全。在看了很多thinkphp生态中的后台管理系统，发现没有合适的前替代分离系统。则开发了CatchAdmin。完全利用了thinkphp6的新版本特性ServiceProvider，将管理系统模块之间的交换降到...
vue动态路由配置及路由传参的方式
12-10
　简单来说，它是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就可以渲染不同的标签，可以浏览器端查看到 　并且当一个导航器被激活的时候，会...
【前后端分离开发模板】基于 Vue 和 SpringBoot 的通用管理系统
09-02
本软件是基于 Vue 和 SpringBoot 的通用管理系统，是一个很好的前后端分离开发模板，可用于开发毕业设计，包含了登陆注册、用户管理、部门管理、文件管理、权限管理、日志管理、个人中心、数据字典和代码生成这九个...
【vue3】获取字典数据，封装为公共方法
花椒和蕊的博客
07-26 3603
vue3封装公共获取字典数据方法
vue3项目中的字典功能
fatfish517的博客
04-27 2593
若依平台的字典模块使用简洁便利，但是仍存在一些有待改进的地方： - 该模块使用minxin方法在vue3中已不再被提倡； - 模块阅读难度较大。主要是个人水平所限； - 无法在el-table-column的filters中使用； - 无常用自定义常量的功能，如布尔型变量的展示； - 不能处理后台枚举类型数据； - 未实现数据持久化处理，需要不断请求后台数据；
vue数据字典前端实现
09-06
在Vue中实现前端数据字典可以通过以下步骤进行： 1. 首先，在后端维护好字典类型和对应的字典值。可以使用一个API来获取字典数据。 2. 在前端，可以通过调用后端提供的API来获取字典数据。可以使用Vue的生命周期钩子函数或者watch来监听数据字典类型的变化，当数据字典类型的值发生变化时，调用API获取对应的字典值。 3. 在Vue组件中，可以使用一个Vue实例的变量来存储字典值，比如`dictionaryItemList`。当获取到字典值后，将其赋值给`dictionaryItemList`。 4. 在模板中，可以使用v-for指令遍历`dictionaryItemList`，将字典值展示在下拉列表或其他地方。 下面是一个简单的示例代码，用于展示如何在Vue中实现前端数据字典： ```javascript <template> <div> <select v-model="selectedItem"> <option v-for="item in dictionaryItemList" :value="item.value">{{ item.label }}</option> </select> </div> </template> <script> export default { data() { return { code: 'gender', // 数据字典类型代码 dictionaryItemList: [], // 存储字典值的数组 selectedItem: '' // 选择的字典项 } }, watch: { code: { immediate: true, handler: 'loadData' } }, methods: { loadData() { if (this.code) { this.dictionaryItemList = [] // 清空之前的字典值 this.$api.system.dictionaryType.getItem(this.code).then(res => { this.dictionaryItemList = res.data // 获取到字典值后赋值给dictionaryItemList }) } } } } </script> ``` 在上面的示例代码中，`code`表示数据字典类型的编码，`dictionaryItemList`用于存储字典值，`selectedItem`表示当前选中的字典项。通过watch监听`code`的变化，当`code`发生变化时，调用`loadData`方法获取对应的字典值，然后将其赋值给`dictionaryItemList`。在模板中，使用v-for指令遍历`dictionaryItemList`生成下拉列表的选项。 注意，上述示例代码中的`this.$api.system.dictionaryType.getItem`是一个示例API，具体的API调用需要根据实际情况进行修改。 总结起来，Vue中实现前端数据字典可以通过监听数据字典类型的变化，在合适的时机调用API获取字典值，并将其存储在Vue实例的变量中，然后在模板中展示字典值。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Web阿成

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值