您的位置：首页 > 产品设计 > UI/UE

Vue.js学习系列（三十五）-- Vue.js事件监听

2017-03-20 13:47 711 查看

Vue.js中事件监听可以使用 v-on 指令：

通过记录按钮点击次数来学习如何使用v-on指令来监听事件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<button v-on:click="counter+=1">增加1</button>

<p>这个按钮被点击{{counter}}次</p>

</div>

<script type="text/javascript">

new Vue({

el:"#app",

data:{

counter:0

}

})

</script>

</body>

</html>

运行结果：

点击增加1按钮，那么这个按钮被点击的次数就会增加。

通常情况下，我们会使用一个方法来调用javaScript方法，v-on 可以接收一个定义的方法来调用。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>事件绑定</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<button v-on:click="addTimes">增加1</button>

</div>

<script type="text/javascript">

var app=new Vue({

el:"#app",

data:{

counter:0

},

methods:{

addTimes:function (event) {

this.counter+=1

alert("按钮点击的次数"+this.counter)

}

}

})

app.addTimes()

</script>

</body>

</html>

运行结果

点击”增加1”按钮，会弹出如下图的对话框

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

下面通过内联javaScript语句，实现和上个例子一样的功能。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>事件绑定</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<button v-on:click="addTimes()">增加1</button>

</div>

<script type="text/javascript">

new Vue({

el:"#app",

data:{

counter:0

},

methods:{

addTimes:function () {

this.counter+=1

alert("按钮点击的次数"+this.counter)

}

}

})

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Vue.js 事件监听

相关文章推荐

新的分享

章节导航