点击绑定事件（基于vue）

最新推荐文章于 2024-08-30 14:16:59 发布
最新推荐文章于 2024-08-30 14:16:59 发布
阅读量611 收藏 1
点赞数
分类专栏： 项目需求
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/edc666/article/details/104670059
版权
本文介绍了一个基于Vue的需求，即点击字母导航到相应字母开头的城市列表。通过分析事件、Vue的emit和兄弟组件间通信，详细阐述了解决步骤，包括获取点击元素、使用emit传递事件、在父组件中监听并传递值到子组件，以及在子组件中通过watch监听并利用better-scroll API更新显示。
摘要由CSDN通过智能技术生成

需求

点击右边的字母，然后跳转到对应的字母的城市列表

如图，点击A 就显示到A。 点击B就显示到B

 
5489379-68fafc9b99a89fef.png
 

解决方法

第一步思路

首先要获取到点击的是什么东西，比如点击A就要获取到这个A。那么这个e代表的是什么呢？e其实就是点击事件，然后通过e的属性去获取到这个a。 这里可以通过控制台去查看

        handleLetterClick(e){
            console.log(e.target.innerText)
        }

第二步思路

现在已经获取到了点击的东西，那么就要想把它传给谁。既然要让城市列表联动，那么就一定是传给这个列表组件。这里就会涉及到vue兄弟组件间的传值。

因为这两个是同父组件，所以不需要用到BUS总线的方式。直接将其传给父组件，然后在又父组件传递给子组件，这样就实现了兄弟组件间的传值

那么如何做呢？这里需要提到一个属性 emit。它用来向外传递事件。比如这个代码的意思是，每次点击时，向外触发change

最低0.47元/天 解锁文章
edisonMamba
关注
专栏目录
使用VUE实现点击事件
m0_74294675的博客
03-21 2344
2，切片好的图片保存为web所用格式保存到桌面后进行使用。
vue动态渲染svg、添加点击事件的实现
10-15
通过`extend()`方法，我们可以定义一个基于Vue的子类，并在模板中引用这个子类来动态生成SVG内容。 2. **创建xhr对象获取SVG文件**：由于需要动态加载SVG文件，我们通常使用AJAX请求来获取SVG资源。本文档中推荐...
动态绑定属性
qq_33879627的博客
09-21 3320
（四）动态绑定属性 4.1 v-bind的基本使用 ​ 某些时候我们并不想将变量放在标签内容中，像这样<h2>{{message}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:sr
vue点击事件
最新发布
爱敲代码的卡拉米的博客
08-30 1072
在Vue中，处理点击事件是一种常见且基本的需求，通常用于响应用户与UI元素的交互。Vue通过v-on指令（或其简写形式）来监听DOM事件，包括点击事件（click）。
vue动态生成dom并且自动绑定事件
01-19
用jquery的时候你会发现，页面渲染后动态生成的dom，在生成之前的代码是没...但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。 html: <input type=text v-model=item.val style=width:40px>
vue.js绑定事件监听器示例【基于v-on事件绑定】
10-18
Vue.js 的 `v-on` 指令不仅可以绑定原生DOM事件，如 `click`、`mouseover` 和 `keydown`，还可以与自定义组件事件一起使用。此外，我们可以通过使用`.stop`、`.prevent`、`.capture`、`.self`和`.once`修饰符来改变...
vue实现点击div外部触发事件的封装方法，注：基于element（学习vue的第一个月零不知道几天）
01-08
基于 Element UI，我们可以方便地实现这一功能，Element UI 提供了一个名为 `clickoutside` 的指令，帮助我们处理点击元素外部的事件。 在给定的示例中，`clickoutside` 指令被引入并封装在 Vue 的组件中。首先，...
vuejs响应用户事件（如点击事件）
12-12
需求： 页面上的列表原先有3个，我们想点击一次添加一条记录，也可以在头和尾删除数据； 我们也可以删除我们想删除的任意一行记录； 如果是用传统的jquery操作，页面中js会特别多，而且操作也很麻烦。 这里用vue.js就非常简单。 我们先看页面效果： 页面初始化.png 末尾增加一项.png 删除项.png 再来看代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
vue 点击事件
cjwcjwwjcwjc的博客
04-10 1142
编写vue @click绑定事件的时候，紧记不能把方法的名字设置成为export 否则会出现莫名的空白页。。。。。
Vue之点击事件
weixin_40016215的博客
03-10 4065
1、@keyup.enter.native和@click.native.prevent是什么意思 一、 @keyup.enter.native 一般vue的监听组件，是这样写 <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"> 但是， 如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native <el-input v-model="account" placeho
vue事件处理
weixin_30361641的博客
02-09 101
v-on监听dom事件 //简单逻辑直接使用js代码，很方便 <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> &lt...
vue 动态绑定 点击事件(匿名函数)
exu131g的博客
07-11 4433
遇到一个问题,一个点击方法在v-for里的一个元素上,由于该方法需要处理本次循环的数据并影响本次循环的其他元素,所以暂时没有想到可以把方法声明在vue的methods里的方法,所以就直接写在了元素上: <view @click="function(){if(order.createTime!=-1){order.createTime=-1;}else{order.createTime=1}}"> <view style="width: 50vw;" >回收物品</
vue--点击事件
weixin_33797791的博客
10-16 167
<template> <div id="app"> <p>{{msg}}</p> <input type="text" v-model="msg" ref="userinfo" /> <input type="button" value="按钮" v-on:click="getMsg()"&g...
vue 点击动态绑定不同的事件
热门推荐
weixin_37035452的博客
09-30 1万+
vue 点击动态绑定不同的事件 今天接到业务要求优惠券做不同的数据详情请求，并且要求有的优惠券第一次能点击弹出一个文本框，第二次点击不允许，带三次可以（典型的奇偶点击）；接着就是右下角有一个总按钮，奇数点击所有的优惠券可以查看，偶数全部失效； 也不知道你们看懂没有，反正我们业务就是这样说的（因为这里没有数据所以我就用假数据做）。我是理解了，好了废话不多说直接上代码 <template&g...
Vue——动态绑定点击事件、样式
qq_43201350的博客
09-21 1134
// 绑定样式 <div :[name]="d1"></div> // 绑定点击事件 <div @[eventName]="myClick"></div> data () { return { d1: 'class', // id eventName: 'click' } } <style> #d1 { color: red; } .d1 { color: green; }
基于vue写一个点击事件 点击加一
03-29
假设有一个按钮，点击后让数值加一，可以使用以下代码实现： ```html <template> <div> <p>{{ count }}</p> <button @click="increment">加一</button> </div> </template> <script> export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } } } </script> ``` 在上面的代码中，我们使用了一个data属性count来存储数值，并在模板中显示它的值。在按钮上绑定了一个click事件，当按钮被点击时，会调用increment方法，该方法会将count的值加一。由于Vue的响应式设计，当count的值改变时，模板会自动更新显示的数值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值