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>

vue中 @click 绑定点击事件方法传递参数 typescript(通用)相关推荐

vue中父元素点击事件与子元素点击事件冲突
vue中父元素点击事件与子元素点击事件冲突在做vue项目的时候,遇到子元素有点击事件,父元素也有点击事件,当点击子元素时往往触发的是父元素的点击事件,产生冲突,怎样解决这个问题呢?这就用到vue事件 ...
在html中搜索按钮事件,html中button绑定点击事件的几种方法介绍
HTML中为button绑定事件的方式有三种. 例如以下标签: submit 一.使用jquery进行绑定$('#btn_submit').click(function(){ }); 二.使用原生js ...
vue中a标签点击事件效果不理想
如果你发现在vue项目中给a标签加点击事件,然后在methods的事件处理函数中程序达不到预期的效果,比如该出的弹窗没有出来,考虑给点击事件加个prevent修饰符试试.prevent修饰符,本质上是 ...
vue中echarts的点击事件,给当前点击的柱状图修改背景色
最近项目中需要使用到echarts,需要实现点击柱状图时,修改当前点击的柱状图背景色,且没有阴影背景的效果 (如下图) 这样的话,需要给eharts添加click点击事件,直接贴代码: html: & ...
关于js中无法绑定点击事件
在js文件中添加点击事件失败,但是HTML中onclick就能成功. 解决办法:将js的引用的script标签放到</body>的后面.这样在页面渲染之后再执行js代码.
vue父组件在接收子组件方法传递参数的时，如何添加自定义参数
在vue中,父组件中使用子组件方法的和传递过来的参数时直接只用参数就可以了,如下: // child this.$emit('change', param) // parent @change='pa ...
Node.contains() 报错， vue中监听点击事件，除了点击自己，点击其他地方将自身隐藏
更新: 添加完整示例: test.vue文件 (点击id为content的p,flag的值不会改变;点击页面的其他地方,flag的值会改变) <template><div class ...
react中绑定点击事件_在React中绑定事件处理程序的最佳方法
react中绑定点击事件 by Charlee Li 通过李李在React中绑定事件处理程序的最佳方法 (The best way to bind event handlers in React) ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...

vue中 @click 绑定点击事件方法传递参数 typescript(通用)

vue中 @click 绑定点击事件方法传递参数 typescript(通用)相关推荐

最新文章

热门文章

vue中 @click 绑定点击事件 方法传递参数 typescript(通用)

vue中 @click 绑定点击事件 方法传递参数 typescript(通用)相关推荐

最新文章

热门文章

vue中 @click 绑定点击事件方法传递参数 typescript(通用)

vue中 @click 绑定点击事件方法传递参数 typescript(通用)相关推荐