0

0

vuejs怎么实现字符串转对象

藏色散人

藏色散人

发布时间:2021-11-02 15:31:51

|

9075人浏览过

|

来源于php中文网

原创

vuejs实现字符串转对象的方法:1、从数据库表中读取原数据;2、通过“this.temporary=JSON.parse(row.selections);”方法将字符串转换成json对象即可。

vuejs怎么实现字符串转对象

本文操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

vuejs怎么实现字符串转对象?

vue.js对String类型转json格式及json对象转String:

在写vue项目的时候,由于数据量庞大转化格式相对比较复杂,于是就直接表单获取值按String格式存入了数据库表中,但是在编辑记录的时候,又得从数据库表中按id读取,再相对应的在页面上显示;

立即学习前端免费学习笔记(深入)”;

于是:就教大家如何在vue项目中怎么进行String格式 Json格式的相互转化:

京点点
京点点

京东AIGC内容生成平台

下载

且看数据库存放的数据格式;本文以selections字段为例;
在这里插入图片描述
在这里插入图片描述
接下来,我就来演示一下,String格式,json格式是如何相对转换
vue.js 部分重要演示代码附上:

editFormBuilder(row){
//aa bb cc 只是在方便调试更清楚的看到从数据库表中拿的数据
		//从数据库表中读取原数据,注意看数据格式
        console.log("aa",row.selections);
        
        //接下来,如何解析成json型
        this.temporary=JSON.parse(row.selections);//将字符串转换成json对象
        this.items=this.temporary;
        console.log("bb",this.items);
        
        //注意看,又把对象转换成String型
       this.flag=JSON.stringify(row.selections);//将json对象转换成字符串
        this.items=this.flg;
        console.log("cc",this.items);//再次转化格式!注意看
      },

注意看下图!!!就会体会到JSON.parse ,JSON.stringify的魅力所在!
在这里插入图片描述
顺便再详细介绍一下两函数的用法:【ps:详情来至菜鸟教程 跳转到菜鸟教程url】
(1)JSON.parse函数 :

作用:将json字符串转换成json对象

语法:JSON. parse(text[,reviver]).

参数:text  必须;一个有效的json字符串。

	reviver :可选。

返回值:一个对象或数组。

(2)JSON.stringify()函数 :

	作用:将json对象转换成json字符串。

	语法:JSON.stringify(value [, replacer] [, space]) 

	参数:value  必须;通常为对象或数组。

		replacer:可选,用于转换结果的函数或者数组。

		space :可选。向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。 

	返回值:一个包含JSON文本的字符串。

推荐学习:《最新的5个vue.js视频教程精选

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

412

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

533

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

309

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

74

2025.09.10

vue.js为什么报错
vue.js为什么报错

vue.js报错的原因:1、语法错误;2、组件使用不当;3、数据绑定问题;4、生命周期钩子使用不当;5、插件或依赖问题;6、路由配置错误;7、异步操作处理不当等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

120

2024.03.11

vue.js插槽有哪些用
vue.js插槽有哪些用

vue.js插槽的作用:1、提高组件的可重用性;2、实现组件的灵活布局;3、实现组件间的数据传递和交互;4、促进组件的解耦和模块化。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

172

2024.03.11

vue.js怎么带参数跳转
vue.js怎么带参数跳转

vue.js带参数跳转的方法:1、定义路由;2、在组件中使用路由参数;3、进行带参数的跳转。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

90

2024.03.11

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

318

2023.08.02

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

43

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue.js:纪录片
Vue.js:纪录片

共1课时 | 0.2万人学习

2天速成VueJS
2天速成VueJS

共7课时 | 2.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号