vue处理JSON格式

后端返回图片的类型有

["http:\/\/pic.tjxes.com\/myhqwag1f34x10uv58gx.png"],
["http://pic.tjxes.com/bq94qgls1fzwmuil3s2u.png","http://pic.tjxes.com/ax1453acbl72nvyxuaea.png"],
"http://pic.tjxes.com/809c7fcbd43a4c31b3b0ac3a8a428c72"

需要处理三种渲染到页面上

         let _list = rd.data.list;
         for (let i in _list) {
           _list[i].imgs = [];
           if (_list[i].feedback_media) { //feedback_media为返回的图片
             let imgs = _list[i].feedback_media.split(",");
             if (imgs.length >= 2) {   //首先判断图片数组里是一张图片还是多张
               imgs.map((item, index) => {   
                 let imgArray = item.split(",").toString(); //转成字符串格式
                 if (imgArray.indexOf("[") != -1) {  //判断左边是否有"["
                   _list[i].imgs.push(        //去调多余的[替换成空
                     imgArray                         
                       .split("[")
                       .join("")
                       .substring(1, imgArray.split("[").join("").length - 1)
                   );
                 }
                 if (imgArray.indexOf("]") != -1) { //判断右边是否有"]"
                   _list[i].imgs.push(
                     imgArray
                       .split("]")
                       .join("")
                       .substring(1, imgArray.split("]").join("").length - 1)
                   );
                 }
               });
             } else if (imgs.length < 2) {  //一张图片的时候判断是数组还是单字符串
               imgs.map((ele, index) => {
                 if (ele.slice(0, 1) != "[") { //通过第一位是不是[来判断
                   _list[i].imgs.push(imgs.toString());
                 } else {
                   _list[i].imgs.push(JSON.parse(imgs).toString());
                 }
               });
             }
           }
         }
### 推荐适用于 Vue3JSON 格式化库 对于 Vue3 项目,可以使用 **`vue3-json-viewer`** 来实现 JSON 数据的格式化和可视化展示[^2]。该库支持多种功能特性,例如展开深度控制、复制按钮、排序选项以及扩展模式等功能。 #### 安装方法 通过 npm 下载 `vue3-json-viewer` 库: ```bash npm install vue3-json-viewer --save ``` #### 全局注册方式 在项目的入口文件(如 `main.ts` 或 `main.js`)中进行全局注册: ```typescript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; // 引入 vue3-json-viewer 及其样式文件 import JsonViewer from "vue3-json-viewer"; import "vue3-json-viewer/dist/index.css"; const app = createApp(App); app.use(JsonViewer).mount(&#39;#app&#39;); ``` #### 组件局部使用示例 如果仅需在特定组件中使用,则可以直接导入并声明为子组件: ```html <template> <div> <!-- 遍历 JSON 数组 --> <div v-for="(item, index) in parsedOldData" :key="index"> <json-viewer :value="item" :expand-depth="5" copyable boxed sort expanded /> </div> </div> </template> <script lang="ts"> import { defineComponent, computed } from &#39;vue&#39;; import JsonViewer from &#39;vue3-json-viewer&#39;; import &#39;vue3-json-viewer/dist/index.css&#39;; export default defineComponent({ components: { JsonViewer, }, props: { dialogData: { type: Object, required: true, }, }, setup(props) { const parsedOldData = computed(() => JSON.parse(props.dialogData.oldData)); return { parsedOldData, }; }, }); </script> ``` 上述代码展示了如何解析字符串形式的 JSON 并将其传递给 `<json-viewer>` 组件以实现可视化的渲染效果。 #### 替代方案 除了 `vue3-json-viewer` 外,还可以考虑其他替代方案来满足不同的需求: 1. 使用原生 HTML `<pre>` 标签配合 JavaScript 方法 `JSON.stringify()` 实现简单的 JSON 格式化显示[^3]: ```html <template> <pre>{{ formattedJson }}</pre> </template> <script lang="ts"> import { defineComponent, ref, watchEffect } from &#39;vue&#39;; export default defineComponent({ setup() { const jsonData = ref({ key: &#39;value&#39;, nested: { innerKey: &#39;innerValue&#39; } }); const formattedJson = ref(&#39;&#39;); watchEffect(() => { formattedJson.value = JSON.stringify(jsonData.value, null, 4); }); return { jsonData, formattedJson, }; }, }); </script> ``` 2. 自定义过滤器或工具函数处理复杂场景下的 JSON 显示逻辑[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值