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>