html中跳转页面并传参，且下一个页面接收参数

最新推荐文章于 2023-10-25 14:01:58 发布

EstherNi

最新推荐文章于 2023-10-25 14:01:58 发布

阅读量1k

点赞数

分类专栏： VUE html-css-js html 文章标签： html 前端 vue.js

本文链接：https://blog.csdn.net/EstherNi/article/details/126481883

版权

VUE 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

html-css-js

11 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML中使用Vue.js实现列表循环中的点击事件，通过`v-for`遍历并调用`first`方法，传递单条数据。同时，展示了数据从子组件到父组件的接收过程，涉及`window.location.href`的使用和getQueryString方法。

摘要由CSDN通过智能技术生成

此方法无论是在纯html中还是html中引入Vue用法均可

在html中引入vue的用法，包括循环时怎么点击每个的数据获取此条数据的相关内容

<div v-for='(item,index) in listFirst @click="first(item)"></div>

跳转页面：
first(val) {
	let url = "list-show.html?id=" + val.id + "&tabLabel=" + val.CodeName; //此处拼接内容
	window.location.href = url;
},

接收页面：
created() {
	let value = this.GetQueryString("id")
}
GetQueryString(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	if (r != null) return unescape(r[2]);
		return null;
},