vue-for循环输出json数据_json_weixin

<!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>

复制代码
vue-for循环输出json数据

weixin_34289454

所有评论(0)

weixin_34289454
