vue将数组转换json字符串:JSON.stringify()以及json字符串转换成vue数组:

JSON.stringify():方法用于将 JavaScript 值转换为 JSON 字符串。

语法

JSON.stringify(value [, replacer] [, space])
  1. value
    将要序列化成 一个JSON 字符串的值。
  2. replacer 可选
    可以为数组或函数
    如果为数组:则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中,replacer作key值(这个在讲实例的时候就知道这个key是干嘛的了,先记住就好)
    如果为函数:则把系列化后的每一个对象(记住是每一个)传进方法里面进行处理
  3. space 可选
    指定缩进用的空白字符串
    如果省略的话,那么显示出来的值就没有分隔符。直接输出来
    如果是一个数字的话,那么它就定义缩进几个字符,范围是:0到10(数字小于1,则默认为0,大于10,则默认为10)
    如果是一些转义字符,比如“\t”,表示回车,那么它每行一个回车。
    如果仅仅是字符串,就在每行输出值的时候把这些字符串附加上去就OK。当然,最大长度也是10个字符

实例

今天写项目遇到一个这样的问题
作者字段中需要存入一段json格式的字符串信息
在这里插入图片描述
于是,我的前端页面中,绞尽脑汁让数据存在了数组中…
在这里插入图片描述

在这里插入图片描述
没有将数组转换成json字符串就会报错,就像这样:/(ㄒoㄒ)/~~
在这里插入图片描述

最后如下图所示,使用JSON.stringify()将作者数组用一个字符串类型的变量接受。
在这里插入图片描述
成功转换成了json字符串,输出:
在这里插入图片描述

JSON.parse() 方法将数据转换为 JavaScript 对象。

语法

JSON.parse(text[, reviver])

参数说明:

  1. text:必需, 一个有效的 JSON 字符串。
  2. reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。

实例

当我需要将数据库中存入的json字符串读取出来展示到页面上
在这里插入图片描述
展示页面如下:
在这里插入图片描述


文章标签:

原文连接:https://blog.csdn.net/weixin_50823456/article/details/121937003

相关推荐

Webpack学习系列 - Webpack5 怎么集成Babel ?

我在淘宝做弹窗,2022 年初的回顾与展望

看完这篇,你也可以搞定有趣的动态曲线绘制

低代码平台的属性面板该如何设计?

34个图片压缩工具集合,包含在线压缩和CLI工具

冴羽答读者问:过程比结果重要吗?如果是,怎么理解?如果不是,又怎么解?

中杯超大杯中间的新选择——vue2.7+vite+ts实践

LiveData源码分析

亚马逊Prime:流媒大战杀手锏

Vue详解知识概括

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

完美解决自定义字体垂直方向上下偏移的问题

使用vuepress从零开始搭建我的技术文档|已部署到线上

【Vue.js 3.0源码】AST 转换之节点内部转换

小程序+电商,该如何寻找营销增长点

前端如何开始深度学习,那不妨试试JAX

你可能不知道的 前端浏览器(window) 对本地文件操作(File System Access API)

爱奇艺向抖音开启授权,打开内容价值的新大门

使用ComposeDesktop开发一款桌面端多功能APK工具

一个简洁、强大、可扩展的前端项目架构是什么样的?