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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。