Vue之v-on:click=" " 事件

最新推荐文章于 2024-03-18 18:44:26 发布
最新推荐文章于 2024-03-18 18:44:26 发布
阅读量703 收藏 1
点赞数
分类专栏： Vuejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44415461/article/details/96770838
版权

v-on:click=" " 和 @click=" " 效果一样
v-model=" " 双向数据绑定
@keyup=" " 键盘事件
el: ’ # ’ 作用域名称 ， 必须加 #
data: { } 初始化数据，可以定义常量、字符串、数组、对象等。。。
methods: {
方法名：function(){
代码…
}
}
所有方法都要写在methods的方法体里，除了原生的JavaScript方法

在方法体里，方法调用data定义的变量，必须用this关键字
比如：this.num

parseInt() 从页面传过来的数据是字符串，要使用parseInt(this.变量名)方法转换成整型

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-on</title>
	<script src="js/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<p>{{num}}</p>
		<p>
			<button v-on:click="add">+1</button>
			<button @click="sub">-1</button>
		</p>
		<input type="text" v-model="newNum" @keyup="onEnter">
	</div>
</body>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			num: 10,
			newNum: 1
		},
		methods: {
			add: function(){
				return this.num++;
			},
			sub: function(){
				return this.num--;
			},
			onEnter: function(){
				this.num += parseInt(this.newNum);
			}
		}
	})

</script>
</html>
Mr.ZKH
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE中v-on:click事件中获取当前dom元素的代码
12-29
在开发中总是忘记，特意在此记录 关键字： $event <div class=bed v-on:click=updateBed...PS：下面看下v-on:click获取当前事件对象元素 dom元素这样写: <i @click=iconToogle($event) class=iconfont icon-
详解vue.js的事件处理器v-on:click
10-19
本篇文章主要介绍了详解vue.js的事件处理器v-on:click，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue v-on:click传递动态参数的步骤
10-14
主要介绍了vue v-on:click传递动态参数的步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue教程1-04 事件 v-on:click="函数"
weixin_33721427的博客
04-25 178
vue教程1-04 事件 v-on:click="函数"   v-on:click/mouseout/mouseover/dblclick/mousedown..... 实例：为data添加数据 实例，点击按钮，div显示/隐藏切换 实例，vue实现简易留言本 事件: v-on:click="函数" v-on:click/mouseout/mouseover/d...
@click 和 v-on:click 的区别
最新发布
YHLSunshine的博客
03-18 849
`@click 和 v-on:click 的含义 与 两者之间的区别
点击事件（v-on:click）
01-19 9587
点击事件v-on:click<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window
vue常用事件之v-on:click 以及事件对象，事件冒泡，事件默认行为
热门推荐
涂涂
01-18 15万+
其实v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown....... 以下click为例 注意：所有的v-on都可以简写为@，比如说v-click可以简写为@click 1.监听事件 可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。通常来讲就是
Vue.js基础-07-绑定事件（v-on）-01-点击事件（click）
运维玄德公
05-31 6166
1. 点击事件参数（click） 1.1 基本使用 1.2 绑定一个方法 1.3 冒泡事件 说明 示例 2. 点击事件修饰符 2.1 .stop （阻止冒泡） 使用说明 使用示例 2.2 capture （捕获冒泡） 使用说明 使用示例 2.3 .self （只监听触发该元素的事件） 使用说明 使用示例 2.4 once （事件只触发一次） 使用说明 使用示例 2.5 鼠标的修饰符......
9 插值表达式 v-on:click、v-html、v-bind:title
wgchen
11-25 711
[基础]插值表达式和v-bind数据绑定场景插值表达式是什么？插值表达式输出html标签 v-html指令插值表达式只作一次渲染 v-once插值表达式中是可以使用JS表达式的v-bind指令的使用 场景 通过前两节内容终于学完了Vue3.x中的生命周期函数了，因为这套教程默认你是没有Vue2.x的基础的，所以就不讲解Vue2和Vue3生命周期的区别了，你只要记住Vue3的8个生命周期就可以了。 这节我们主要学习两个模板语法：插值表达式 和 v-bind 的使用。 插值表达式是什么？ 我以前在教程中经常说的
Vue学习（五）——v-on指令
weixin_45927758的博客
10-05 543
1.v-on语法糖 v-on:click="函数名"，可以简写为@click="函数名"。 2.v-on事件监听传参 其他情况下，如果函数需要参数，但是我们并没有传参，那么该参数就是undefined类型，但是在Vue中，我们在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的（并且只需要一个参数），这个时候，Vue会默认将浏览器生产的event事件对象作为参数传入方法中，比如鼠标点击的数据。 如果我们想要在有参数的同时传入event事件对象，我们可以传入：$event,这样就可以得到浏
Vue v-on属性的使用
xiaofangto5623的博客
04-26 514
v-on作用：绑定事件监听器 <template> <div> <p>{{count}}</p> <button v-on:click="count++">按钮1</button><!--直接绑定事件--> <button v-on:click="addCount">按钮2</button><!--绑定函数--> </div> </te
v-on点击事件的基本使用
weixin_45736311的博客
05-15 320
v-on 作用：绑定事件监听 缩写：@ 参数：event 1.v-on的基本使用 其中： click 点击事件 counter:计数器 methods 方法 increment 增加 decrement 减少 v-on的缩写：@ 用@代替 v-on: 2.v-on参数
vue指令 v-on:监听事件事件监听
pyp_demon的博客
12-20 473
绑定事件监听器。事件类型由参数指定。 可以简写为@ :语法糖 v-on:click="do()" 等价于 @click="do()" <template> <div class="hello"> <div @click="pushFunc()">v-on语法糖</div> <div @click="pushFunc()">v-on</div> </div> </template>
vue监听事件 v-on
weixin_34370347的博客
12-29 66
代码：问题：如何将button和counter关联起来，通过点击button按钮，递增counter的数值。 可以通过 v-on 指令来完成此关联。 v-bind是在模板中绑定一些东西，从而将数据传入模板中。v-on的功能则是相反的，这里的绑定更加确切的说是监听，它可以接受一些来自模板的东西，例如事件，v-on同样需要参数，它的参数是事件的名称，这个事件就是我们要监听并使用的，例如我们可以在这里...
vue全家桶项目所用到的技术栈
weixin_44415461的博客
08-10 1520
项目构建工具vue-cli vue-cli是一个脚手架工具，为我们搭建了开发所需要的环境和生成目录架构 路由vue-router 创建单页应用，我们的单页应用只做路由切换，组件拼凑成的页面映射成路由 路由是我们单页应用的核心插件 状态管理vuex 状态管理库，可理解为全局数据集中地 推荐小项目尽量别用vuex，会显得有点繁琐，bus总线机制完全可以处理了 http请求工...
Vue之模拟添加和清空购物车
weixin_44415461的博客
07-23 996
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-set</title> <script src="js/vue.min.js"></script> </head> <body> ...
路由的传参和取参
weixin_44415461的博客
08-04 726
查询参 配置（传参） :to="{name:‘login’,query:{id:loginid}}" 获取（取参） this.$route.query.id 路由参数 配置（传参） :to="{name:‘register’,params:{id:registerid} }" 配置路由的规则 { name:‘detail’,path:’/detail/:id’}...
实战系列之安装使用ui框架-----cube-ui
weixin_44415461的博客
08-10 608
vuecli3.x版本安装：vue add cube-ui cube-ui:https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start 安装cube-ui的配置选择：https://github.com/cube-ui/cube-template/wiki
v-on:click="importPrivateKey"
07-27
它使用了Vue.js的指令`v-on:click`来监听点击事件，并在点击时执行`importPrivateKey`方法。 在这个代码片段中，`v-on:click="importPrivateKey"`表示当点击该元素时，会调用名为`importPrivateKey`的方法。您可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值