vue，使用:href，动态修改带有地址属性的标签的地址的参数

仅此，

于 2021-07-11 21:38:35 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/Hcy_code/article/details/118660420

这个示例展示了如何在Vue.js应用中创建动态链接和响应式方法。页面包含两个链接，一个通过模板语法直接拼接URL，另一个通过`makeUrl`方法生成。此外，还有一个按钮，点击会触发`changeId`方法，改变`id`变量的值，从而影响链接的动态行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<a :href="'www.aaa.com?id='+id">test</a>
			<br>
			<a :href="makeUrl()">test02</a>
			<br>
			<button @click="changeId()">点击</button>
		</div>
	</body>
	<script>
		const vv = new Vue({
			el: '#app',
			data: {
				id:"1"
			},
			methods:{
				changeId(){
					this.id = "2";
				},
				makeUrl(){
					return "www.ddd.com/2"
				}
			}
		})
	</script>
</html>