vue 带下标循环、点击事件动态id赋值和事件传参
vue 带下标循环、点击事件动态id赋值和事件传参Vue 使用的 CDN，可以直接复制，预览测试 v-for 和 click 事件传参效果。<!DOCTYPE html><html><head><meta charset="utf-8"><title>vue 带下标循环、点击事件动态id赋值和事件传参</title><s
·
vue 带下标循环、点击事件动态id赋值和事件传参
Vue 使用的 CDN，可以直接复制，预览测试 v-for 和 click 事件传参效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue 带下标循环、点击事件动态id赋值和事件传参</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="test">
<!-- 普通带 index 下标的 vue v-for 循环，和 点击事件实现动态传参 -->
<div v-for="(t, index) in testList" v-if="t <= 3">
<h3>h3：这是值 {{t}}, 遍历下标 index={{index}}。</h3>
<a href="t01-click.html" id="a1" v-bind:id=t v-on:click="getId($event)">超链接{{t}}</a>
</div>
<!-- 简写版 :id 等价于 v-bind:id v-on:click 等价于 @click -->
<div v-for="(p, index) in pageList" v-if="p === 'p2.html'">
<h3>p2.html：这是值 {{p}}, 遍历下标 index={{index}}。</h3>
<a href=p id="a1" :id=p @click="getId($event)">{{p}}</a>
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#test",
data: {
testList: [1, 2, 3, 4, 5], // 如 ajax 异步请求后，赋值给 app.testList
pageList: ['p1.html', 'p2.html', 'p3.html', 'p4.html', 'p5.html']
},
methods: {
getId: function(e) {
alert(e.currentTarget); // href属性的绝对路径值：http://127.0.0.1:8848/TestVue/t01-click.html
alert(e.currentTarget.id); // 获取 v-bind:id=值 中绑定的 id 的值，此 id 为其标签中的属性，且不会与非绑定的 id 冲突
for (var i = 0; i < app.idList.length; i++) {
console.log(app.idList[i]);
}
}
}
});
</script>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)