Vue on方法. 多次执行,执行一次, 关闭方法

最新推荐文章于 2024-06-23 14:48:36 发布

Lvdon9

最新推荐文章于 2024-06-23 14:48:36 发布

阅读量5.7k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37995109/article/details/88753570

版权

Vue 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/vue.js"></script>
		<title></title>
	</head>
	<body>
    <h1>实例事件</h1>
    <hr>
    <div id="app">
        {{num}}
        <br>
        <button  @click="add">ADD</button>
        <button  onclick="reduce()">ADD</button>
        <button  onclick="reduceOnce()">add1</button>
        <button  onclick="off()">关闭方法</button>
        
        
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
               num:1
            },
            methods:{
            	add(){
            		this.num++;
            	}
            }
        })
        //不改变构造器.添加方法
        app.$on("reduce",function(){
        	console.log("执行了reduce方法");
        	this.num--;
        })
        //只执行一次
        app.$once('reduceOnce',function(){
		    console.log('只执行一次的方法');
		    this.num--;
		});
        function reduce(){
        	app.$emit('reduce');
        }
        function reduceOnce(){
        	app.$emit('reduceOnce');
        }
        
        //关闭事件
		function off(){
		   app.$off('reduce');
		}
    </script>
</body>
</html>

Lvdon9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue on方法. 多次执行,执行一次, 关闭方法

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &l...
复制链接

扫一扫

专栏目录