vue中@click如何绑定多个事件
作者：HaanLen
这篇文章主要介绍了vue中@click如何绑定多个事件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue @click绑定多个事件
<div @click="show();scrollLyric()" class="showImg">
methods: {
show () {
this.$store.commit('show')
},
scrollLyric () {
setTimeout(() => {
let lis = document.querySelectorAll('li')
console.log(lis)
}, 2000)
}vue @click 绑定点击事件 方法传递参数 typescript(通用)
话不多说还是直接上图 简单明了
<template>
<div id="header">
<img src="../../assets/logo.jpeg" />
<div v-for="(item,i) in navList" v-bind:key="i" :to="item.path" @click.stop="show(item)">{{item.text}}</div>
<div class="user_msg">
<img src="../../assets/logo.jpeg" />
<span>刘十</span>
</div>
<!-- <span @click="show(shiyan)" >搜索</span> -->
</div>
</template><style lang='less'>
#header {
background: RGBA(54, 55, 66, 1);
color: #fff;
height: 60px;
box-sizing: border-box;
line-height: 60px;
padding: 0px 60px;
display: flex;
align-items: center;
> img {
height: 80%;
}
justify-content: space-between;
.user_msg {
display: flex;
align-items: center;
height: 100%;
> span {
margin-left: 30px;
}
img {
height: 40px;
width: 40px;
border-radius: 20px;
}
}
}
</style><script lang='ts'>
import Vue from "vue";
interface NavItem{
path:String,
text:String,
}
//设置类型
export default Vue.extend({
name: "Nav",
data() {
return {
navList: [
{
path: "/",
text: "首页"
},
{
path: "/code",
text: "编程"
},
{
path: "/life",
text: "生活"
},
{
path: "/about",
text: "关于"
}
],
shiyan:'898989'
};
},
methods: {
show(e:NavItem) {
console.log(e.path)
}
}
});
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。