v-on事件处理以及v-if条件判断

最新推荐文章于 2024-04-18 23:45:00 发布

小白-ynysjysg

最新推荐文章于 2024-04-18 23:45:00 发布

阅读量438

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/m0_59707151/article/details/124946695

版权

一、v-on事件处理

1.1 v-on事件处理及传参

<div id="app">
	<h2>{
  {count}}</h2>
	<button type="button" @click="add">+</button>
	<button type="button" @click="sub">-</button>
	<br>
	<br>
	<!-- 传参 -->
	<button type="button" @click="btn('123')">+</button><!-- 123 -->
	<button type="button" @click="btn()">+</button><!-- 不传参undefined -->
	<button type="button" @click="btn">+</button><!-- 事件$event -->
	<button type="button" @click="btn($event,'333')">+</button>
    <button type="button" @click="btn2($event)">+2</button>
    <!-- 同时传事件和参数  第一参数写$event,第二个是参数 -->
</div>

<script type="text/javascript">
	new Vue({
		el:'#app',
		data(){
			return{
				count:0
						
			}
		},
		methods:{
			add(){
				this.count++
			},
			sub(){
				this.count--
			},
			// btn(value){
			// 	console.log(value);
			// }
			btn(e,value){
				console.log(e,value);
			},
			btn2(e) {
				console.log(e);
			}
		
		}
	})
</script>

1.2事件处理修饰符

1.prevent：阻止默认事件

2.stop：阻止事件冒泡

3.once：事件只触发一次

4.capture：使用事件的捕获

5.event.target：只有操作当前的元素时才触发事件

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<!DOCTYPE html>
<ht

最低0.47元/天解锁文章

小白-ynysjysg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-on事件处理以及v-if条件判断

一、v-on事件处理1.1 v-on事件处理及传参<div id="app"> <h2>{{count}}</h2> <button type="button" @click="add">+</button> <button type="button" @click="sub">-</button> <br> <br>  <button
复制链接

扫一扫