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

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

Lvdon9

5814人浏览 · 2019-03-22 23:32:49

Lvdon9 · 2019-03-22 23:32:49 发布

<!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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^