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(ite...
·
话不多说还是直接上图 简单明了
<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>
更多推荐
已为社区贡献1条内容
所有评论(0)