Vue.js 第十节：事件处理复现

最新推荐文章于 2024-10-16 08:30:00 发布

为道日损_yjj

最新推荐文章于 2024-10-16 08:30:00 发布

阅读量158

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/yjj510818155/article/details/104740213

版权

事件处理

监听事件

可以用v-on监听DOM事件，并在触发时运行一些Javascript代码。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id='example'>
			<button v-on:click="counter += 1">数值：{{counter}}</button>
			<!-- 可以将JS代码直接写在v-on中，在下边代码申明counter默认值 -->
        </div>
        <script type="text/javascript">  
            var vm = new Vue({
                el:'#example', 
                data: {
					counter:0
					},
            }) 
        </script>
    </body>
</html>

但平时的时间处理中代码较为复杂，直接放在v-on指令中时不可行的，所以可以让v-on接受一个需要调用的函数名称。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id='example'>
			<button v-on:click="test('hello')">test</button>
			<!-- 在初始化Vue对象中methords属性里定义test函数 -->
        </div>
        <script type="text/javascript">  
            var vm = new Vue({
                el:'#example', 
                data: {
					counter:0
					},
				methods: {
					// 声明函数以及函数体
					test:function(str){
						alert('xixi!');
						alert(this.counter);//其可调用data中属性值.
						alert(str);//可接受形参
					}
				}
            }) 
        </script>
    </body>
</html>

有时也需要在内联语句中访问原始DOM事件。可以用特殊变量 $event 把它传入方法：

    <body>
        <div id='example'>
			<button v-on:click="test('hello',$event)">test</button>
			<!-- 在此添加event时间 -->
        </div>
        <script type="text/javascript">  
            var vm = new Vue({
                el:'#example', 
                data: {
					counter:0
					},
				methods: {
					// 声明函数以及函数体
					test:function(str,e){
						alert('xixi!');
						alert(this.counter);//其可调用data中属性值.
						alert(str);//可接受形参
						console.log(e);//可以在控制台输出该事件
					}
				}
            }) 
        </script>
    </body>