* v-on:事件监听,为页面元素绑定各种监听事件。
keydown:按键按下
keyup:按键抬起
click:鼠标单击
dbclick:鼠标双击
load:控件装载
etd:页面装载
......
* @ 是v-on:的缩写,比如v-on:click可以写成@click
在 data 中定义一个 myMovie 变量,给它一个默认值‘阿凡达’,用于在页面中显示。
给页面中的按钮添加一个点击事件 v-on:click 并绑定在 methods 中设置的 btnClick 方法。
点击按钮修改对应的 myMovie 值,达到实时变化的效果。代码如下:
<div id="myApp"> <h1>您最喜欢的电影是:{{ myMovie }}</h1> <button v-on:click="btnClick('老炮')">老炮</button> <button v-on:click="btnClick('阿凡达')">阿凡达</button> <button v-on:click="btnClick('变形金刚')">变形金刚</button> <button v-on:click="btnClick('速度与激情')">速度与激情</button> <button @click="btnClick('其他')">其他</button> </div> <script> var myApp = new Vue({ el: '#myApp', data: { myMovie: '阿凡达' }, methods: { btnClick: function (movie) { this.myMovie = movie; } } }) </script>
未经允许不得转载:前端资源网 - w3h5 » Vue.js学习笔记——事件监听