用vue循环遍历来自json的数据，并实现到＜a＞标签中

最新推荐文章于 2023-10-08 10:01:49 发布

迪Sun

最新推荐文章于 2023-10-08 10:01:49 发布

阅读量4.5k

点赞数

分类专栏： web 文章标签： vue js json

本文链接：https://blog.csdn.net/sonteki/article/details/114045711

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用vue循环遍历来自json的数据，并实现到< a >标签中

我们从后端收到的json数据中包括URL，name等属性，先提取json中的关键字段重新组装成一个新的变量urls，然后通过v-for和v-html讲urls中的a标签遍历展示在制定位置。
不过这个方法略扯，大家看看就行不要学我，并且v-html不安全，易被xss攻击。

<body>
	<div id="app">
		
		<div class="menu-bar" v-for="url in urls" v-html="url">
			{{url}}
		</div>
	</div>
</body>

<script type="text/javascript">
	var json={"titles":[
				{"name":"门店管理","url":"door_list.html"},
				{"name":"订单管理","url":"order_list.html"}
				]
			};
	var urls={"urls":[]};
	for(var i=0;i<json.titles.length;i++){
		var a="<a href='"+json.titles[i].url+"' target='rightFrame'>› "+json.titles[i].name+"</a>";
		urls.urls.push(a);
		console.log(a)
	}
	var options = {
		el: "#app",
		data: urls
	}
	var vue =new Vue(options);
	</script>

后来才发现上面这个方法非常扯淡，其实只要使用v-bind就能实现属性的绑定，可太简单了，用不着这么麻烦

<body>
	<div id="app">
		
	<div class="menu-bar" v-for="title in titles">
		<a v-bind:href=title.url target='rightFrame'>› {{title.name}}</a>
	</div>
	</div>
</body>

<script type="text/javascript">
	var json={"titles":[
				{"name":"委托管理","url":"wtd_list.html"},
				{"name":"订单管理","url":"order_list.html"}
				]
			};
	// var urls={"urls":[]};
	// for(var i=0;i<json.titles.length;i++){
	// 	var a="<a href='"+json.titles[i].url+"' target='rightFrame'>› "+json.titles[i].name+"</a>";
	// 	urls.urls.push(a);
	// 	console.log(a)
	// }
	var options = {
		el: "#app",
		data: json
	}
	var vue =new Vue(options);
</script>