vue-for循环输出json数据

最新推荐文章于 2024-06-05 14:26:44 发布
最新推荐文章于 2024-06-05 14:26:44 发布
阅读量4.2k 收藏 4
点赞数 1
文章标签： json javascript 后端 ViewUI
原文链接：https://juejin.im/post/5afada8651882567105fe8e2
版权
. 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>vue-for循环输出json数据</title>
		<style type="text/css">
			.a1 {
				margin: 5px auto;
			}
			.blueColor{
				font-size: 1.3em;
				color: blue;
				padding-left: .3em;
			}
			.a1 li{
				border: 1px solid #444444;
				margin: 5px;
				padding: 10px;
			}
		</style>
	</head>

	<body>

		<div id="app">

			<ol class="a1">
				<li v-for="a in msg2">
					<br />
					<p><span>商品名字:</span><span v-text="a.name" class="blueColor"></span></p>
					<p><span>商品id:</span><span v-text="a.id" class="blueColor"></span></p>
					<p><span>商品描述:</span><span v-text="a.goods_brief" class="blueColor"></span></p>
				</li>
			</ol>
		</div>

		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					msg: '你好hello',
					msg2: [{
						"id": 106,
						"category": {
							"id": 694,
							"name": "根茎类",
							"code": "gjl",
							"desc": "",
							"category_type": 3,
							"is_tap": false,
							"add_time": "2018-05-14T16:21:16",
							"parent_category": null
						},
						"goods_sn": "",
						"name": "新鲜水果甜蜜香脆单果约800克",
						"click_num": 0,
						"sold_num": 0,
						"fav_num": 0,
						"goods_num": 0,
						"market_price": 232.0,
						"shop_price": 156.0,
						"goods_brief": "食用百香果可以增加胃部饱腹感，减少余热量的摄入，还可以吸附胆固醇和胆汁之类有机分子，抑制人体对脂肪的吸收。因此，长期食用有利于改善人体营养吸收结构，降低体内脂肪，塑造健康优美体态。",
						"goods_desc": "<p><img src=\"/media/goods/images/2_20170719161405_249.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161414_628.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161435_381.jpg\" title=\"\" alt=\"2.jpg\"/></p>",
						"ship_free": true,
						"goods_front_image": "http://127.0.0.1:8000/media/goods/images/1_P_1449024889889.jpg",
						"is_new": false,
						"is_hot": false,
						"add_time": "2018-05-14T16:28:12"
					}, {
						"id": 107,
						"category": {
							"id": 691,
							"name": "海鲜水产",
							"code": "hxsc",
							"desc": "",
							"category_type": 3,
							"is_tap": false,
							"add_time": "2018-05-14T16:21:16",
							"parent_category": null
						},
						"goods_sn": "",
						"name": "田然牛肉大黄瓜条生鲜牛肉冷冻真空黄牛",
						"click_num": 0,
						"sold_num": 0,
						"fav_num": 0,
						"goods_num": 0,
						"market_price": 106.0,
						"shop_price": 88.0,
						"goods_brief": "前腿+后腿+羊排共8斤，原生态大山放牧羊羔，曾经的皇室贡品，央视推荐，2005年北京招待全球财金首脑。五层专用包装箱+真空包装+冰袋+保鲜箱+顺丰冷链发货，路途保质期8天",
						"goods_desc": "<p><img src=\"/media/goods/images/2_20170719161405_249.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161414_628.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161435_381.jpg\" title=\"\" alt=\"2.jpg\"/></p>",
						"ship_free": true,
						"goods_front_image": "http://127.0.0.1:8000/media/goods/images/2_P_1448945810202.jpg",
						"is_new": false,
						"is_hot": false,
						"add_time": "2018-05-14T16:28:12"
					}, {
						"id": 108,
						"category": {
							"id": 693,
							"name": "叶菜类",
							"code": "ycl",
							"desc": "",
							"category_type": 3,
							"is_tap": false,
							"add_time": "2018-05-14T16:21:16",
							"parent_category": null
						},
						"goods_sn": "",
						"name": "酣畅家庭菲力牛排10片澳洲生鲜牛肉团购套餐",
						"click_num": 0,
						"sold_num": 0,
						"fav_num": 0,
						"goods_num": 0,
						"market_price": 286.0,
						"shop_price": 238.0,
						"goods_brief": "",
						"goods_desc": "<p><img src=\"/media/goods/images/2_20170719161405_249.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161414_628.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161435_381.jpg\" title=\"\" alt=\"2.jpg\"/></p>",
						"ship_free": true,
						"goods_front_image": "http://127.0.0.1:8000/media/goods/images/7_P_1448945104883.jpg",
						"is_new": false,
						"is_hot": false,
						"add_time": "2018-05-14T16:28:12"
					}, {
						"id": 109,
						"category": {
							"id": 694,
							"name": "根茎类",
							"code": "gjl",
							"desc": "",
							"category_type": 3,
							"is_tap": false,
							"add_time": "2018-05-14T16:21:16",
							"parent_category": null
						},
						"goods_sn": "",
						"name": "日本蒜蓉粉丝扇贝270克6只装",
						"click_num": 0,
						"sold_num": 0,
						"fav_num": 0,
						"goods_num": 0,
						"market_price": 156.0,
						"shop_price": 108.0,
						"goods_brief": "",
						"goods_desc": "<p><img src=\"/media/goods/images/2_20170719161405_249.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161414_628.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161435_381.jpg\" title=\"\" alt=\"2.jpg\"/></p>",
						"ship_free": true,
						"goods_front_image": "http://127.0.0.1:8000/media/goods/images/47_P_1448946213263.jpg",
						"is_new": false,
						"is_hot": false,
						"add_time": "2018-05-14T16:28:12"
					}, {
						"id": 110,
						"category": {
							"id": 691,
							"name": "海鲜水产",
							"code": "hxsc",
							"desc": "",
							"category_type": 3,
							"is_tap": false,
							"add_time": "2018-05-14T16:21:16",
							"parent_category": null
						},
						"goods_sn": "",
						"name": "内蒙新鲜牛肉1斤清真生鲜牛肉火锅食材",
						"click_num": 0,
						"sold_num": 0,
						"fav_num": 0,
						"goods_num": 0,
						"market_price": 106.0,
						"shop_price": 88.0,
						"goods_brief": "",
						"goods_desc": "<p><img src=\"/media/goods/images/2_20170719161405_249.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161414_628.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161435_381.jpg\" title=\"\" alt=\"2.jpg\"/></p>",
						"ship_free": true,
						"goods_front_image": "http://127.0.0.1:8000/media/goods/images/10_P_1448944572085.jpg",
						"is_new": false,
						"is_hot": false,
						"add_time": "2018-05-14T16:28:12"
					}, {
						"id": 111,
						"category": {
							"id": 695,
							"name": "茄果类",
							"code": "qgl",
							"desc": "",
							"category_type": 3,
							"is_tap": false,
							"add_time": "2018-05-14T16:21:16",
							"parent_category": null
						},
						"goods_sn": "",
						"name": "乌拉圭进口牛肉卷特级肥牛卷",
						"click_num": 0,
						"sold_num": 0,
						"fav_num": 0,
						"goods_num": 0,
						"market_price": 90.0,
						"shop_price": 75.0,
						"goods_brief": "",
						"goods_desc": "<p><img src=\"/media/goods/images/2_20170719161405_249.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161414_628.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161435_381.jpg\" title=\"\" alt=\"2.jpg\"/></p>",
						"ship_free": true,
						"goods_front_image": "http://127.0.0.1:8000/media/goods/images/4_P_1448945381985.jpg",
						"is_new": false,
						"is_hot": false,
						"add_time": "2018-05-14T16:28:12"
					}, {
						"id": 112,
						"category": {
							"id": 697,
							"name": "进口生鲜",
							"code": "jksx",
							"desc": "",
							"category_type": 3,
							"is_tap": false,
							"add_time": "2018-05-14T16:21:16",
							"parent_category": null
						},
						"goods_sn": "",
						"name": "五星眼肉牛排套餐8片装原味原切生鲜牛肉",
						"click_num": 0,
						"sold_num": 0,
						"fav_num": 0,
						"goods_num": 0,
						"market_price": 150.0,
						"shop_price": 125.0,
						"goods_brief": "",
						"goods_desc": "<p><img src=\"/media/goods/images/2_20170719161405_249.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161414_628.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161435_381.jpg\" title=\"\" alt=\"2.jpg\"/></p>",
						"ship_free": true,
						"goods_front_image": "http://127.0.0.1:8000/media/goods/images/8_P_1448945032810.jpg",
						"is_new": false,
						"is_hot": false,
						"add_time": "2018-05-14T16:28:12"
					}, {
						"id": 113,
						"category": {
							"id": 691,
							"name": "海鲜水产",
							"code": "hxsc",
							"desc": "",
							"category_type": 3,
							"is_tap": false,
							"add_time": "2018-05-14T16:21:16",
							"parent_category": null
						},
						"goods_sn": "",
						"name": "澳洲进口120天谷饲牛仔骨4份原味生鲜",
						"click_num": 0,
						"sold_num": 0,
						"fav_num": 0,
						"goods_num": 0,
						"market_price": 31.0,
						"shop_price": 26.0,
						"goods_brief": "",
						"goods_desc": "<p><img src=\"/media/goods/images/2_20170719161405_249.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161414_628.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161435_381.jpg\" title=\"\" alt=\"2.jpg\"/></p>",
						"ship_free": true,
						"goods_front_image": "http://127.0.0.1:8000/media/goods/images/11_P_1448944388277.jpg",
						"is_new": false,
						"is_hot": false,
						"add_time": "2018-05-14T16:28:12"
					}, {
						"id": 114,
						"category": {
							"id": 696,
							"name": "菌菇类",
							"code": "jgl",
							"desc": "",
							"category_type": 3,
							"is_tap": false,
							"add_time": "2018-05-14T16:21:16",
							"parent_category": null
						},
						"goods_sn": "",
						"name": "潮香村澳洲进口牛排家庭团购套餐20片",
						"click_num": 0,
						"sold_num": 0,
						"fav_num": 0,
						"goods_num": 0,
						"market_price": 239.0,
						"shop_price": 199.0,
						"goods_brief": "",
						"goods_desc": "<p><img src=\"/media/goods/images/2_20170719161405_249.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161414_628.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161435_381.jpg\" title=\"\" alt=\"2.jpg\"/></p>",
						"ship_free": true,
						"goods_front_image": "http://127.0.0.1:8000/media/goods/images/6_P_1448945167279.jpg",
						"is_new": false,
						"is_hot": false,
						"add_time": "2018-05-14T16:28:12"
					}, {
						"id": 115,
						"category": {
							"id": 694,
							"name": "根茎类",
							"code": "gjl",
							"desc": "",
							"category_type": 3,
							"is_tap": false,
							"add_time": "2018-05-14T16:21:16",
							"parent_category": null
						},
						"goods_sn": "",
						"name": "爱食派内蒙古呼伦贝尔冷冻生鲜牛腱子肉1000g",
						"click_num": 0,
						"sold_num": 0,
						"fav_num": 0,
						"goods_num": 0,
						"market_price": 202.0,
						"shop_price": 168.0,
						"goods_brief": "",
						"goods_desc": "<p><img src=\"/media/goods/images/2_20170719161405_249.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161414_628.jpg\" title=\"\" alt=\"2.jpg\"/></p><p><img src=\"/media/goods/images/2_20170719161435_381.jpg\" title=\"\" alt=\"2.jpg\"/></p>",
						"ship_free": true,
						"goods_front_image": "http://127.0.0.1:8000/media/goods/images/9_P_1448944791617.jpg",
						"is_new": false,
						"is_hot": false,
						"add_time": "2018-05-14T16:28:12"
					}]
				},
				methods: {

				},

			});
		</script>
	</body>

</html>

复制代码
weixin_33802505
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
v-for循环遍历:vue-商品列表查询数据分类显示，json数据格式的解析
luoyu6的博客
04-26 1万+
以饿了么来举例吧，我们要显示下图画线框里面的食物信息，数据是遍历json数据出来的， json数据在呢？结构是酱紫的数组里面放了多个对象。对象里面放了数组的同时又放了若干对象，我们要实现上图的效果（将套餐类，特色鸡公煲套餐分类显示），就要把foods这个数组里面的name,description,tips显示出来 怎么做呢？ 首先要用v-for得到goods.json里的每个对象，把...
Vue(7)v-for迭代JSON对象
大连赵哥的博客
06-17 451
Vue(7)v-for迭代JSON对象
window.onload与body onload （一）
shifengkuaile的专栏
07-27 359
一、body.onload 1.1onload的基本格式： &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function bol(){ alert("body"); } &lt;/script&gt; &lt;/head&gt; &lt;body onload="
vue中数组常用的六种循环方法、VUE中list的各种方法和运用
最新发布
zlfjavahome的专栏
06-05 1863
简单记录一下，常用的六种数组循环的方法，分别是for()，map()，forEach()，filter ()，every()，some();
Vue指令v-for之遍历输出JavaScript数组，json对象的几种方式
热门推荐
mosowe
09-18 9万+
定义数据： &lt;script&gt; new Vue({ el:"#test", data:{ message:"infor", list:["a","b","c","d","e"], web:{
vue v-for遍历json
学亮编程手记
12-20 4617
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table,td,th{
解决vue的 v-for 循环中图片加载路径问题
10-18
在Vue.js应用中，`v-for`循环常用于渲染列表数据。然而，在处理图片加载时，尤其是在图片路径与数据动态绑定的情况下，可能会遇到一些问题。本文将深入探讨如何解决Vue的`v-for`循环中图片加载路径的问题。 首先，...
vue基础之data存储数据及v-for循环用法示例
10-17
本文将详细介绍Vue中两个基础知识点：data属性用于存储数据以及v-for指令用于遍历数据。 首先，关于Vue实例中data属性的使用，它是Vue实例的一个选项，用于声明响应式数据。当data中的数据发生变化时，视图也会自动...
浅析vue中常见循环遍历指令的使用 v-for
10-18
第一个循环输出每个数字，而第二个循环输出每个数字及其索引值。 需要注意的是，v-for指令可以作用于template标签中，但在这个例子中未详细展开。这表明v-for不仅仅限于特定的HTML元素，它还可以用于一个模板区域中...
vue-test-tusk
03-17
6. **Vue模板语法**：Vue模板使用普通的HTML，但允许数据绑定（`v-bind`）、事件处理（`v-on`）、条件渲染（`v-if`、`v-else`）、循环（`v-for`）等特性。 7. **Vuex**：如果项目标签提及Vuex，那么项目可能使用了...
vue-crash-2021
03-31
- **模板语法**：Vue使用HTML扩展的模板语法，使得数据绑定和条件/循环语句更加直观。 - **响应式系统**：Vue的响应式系统能自动追踪数据变化，触发视图更新。 - **指令**：如`v-if`、`v-for`、`v-bind`和`v-on`...
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
10-17
主要介绍了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式,结合实例形式总结分析了vue.js使用v-for指令遍历输出js数组与json对象的常见操作技巧,需要的朋友可以参考下
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
10-16
主要介绍了vue.js基于v-for实现批量渲染 Json数组对象列表数据,结合实例形式分析了vue.js使用v-for遍历json格式数据渲染列表相关操作技巧,需要的朋友可以参考下
JS-Vue-指令 JSON Ajax
m0_51318597的博客
08-23 417
v-(text html pre cloak show if for) 发送Ajax请求 JSON对象 Vue生命周期 过滤器
css学习之二表格
henry的博客
12-05 436
效果图如下： 代码如下： HTML Title 姓名 年龄 性别 小王 20 男
Vue(8)v-for迭代JSON数组
大连赵哥的博客
06-17 181
Vue(8)v-for迭代JSON数组
vue 循环遍历Json数据 填充Table表格 学习 例子 整理 记录 自学 前端
03-04 1万+
vue循环遍历Json数据填充Table表格学习例子整理记录自学前端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div id="app"> <table> ...
记录一次vue中json的循环
lazy_ting的博客
05-20 1488
比较常见的循环： <el-timeline> <el-timeline-item v-for="(item, index) in traceDataList" :key="index" :timestamp="dateFormat(item.Timestamp)" placement="top">
vue 小知识点 循环JSON数据 v-pre
小羽向前跑
12-25 457
<template> <div id="app"> <ul> <li v-for="(val, key,index) in obj" :key='index'> <p>{{val}}:{{key}}</p> </li> </ul&gt...
To install them, you can run: npm install --save @jiaminghi/data-view element-resize-detector vue-json-editor vue-json-viewer
06-09
好的，你的第一个问题是关于安装一些npm依赖的命令，是这样的：如何安装这些依赖项 @jiaminghi/data-view，element-resize-detector，vue-json-editor和vue-json-viewer? 答案是：在终端中运行以下命令即可安装这些依赖项： ``` npm install --save @jiaminghi/data-view element-resize-detector vue-json-editor vue-json-viewer ``` 需要注意的是，你需要在你的项目根目录下运行这个命令。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值