Vue基础05v-on事件监听加分减分
v-on:绑定事件监听通过事件监听编写一个加分减分的程序<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">...
·
v-on:绑定事件监听
通过事件监听编写一个加分减分的程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-on实例 事件监听器</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-on实例</h1>
<hr>
<div id="app">
本场比赛的得分:{{grade}}
<p>
<button v-on:click="score">加1分</button>
<button @click="deduction">减1分</button>
<!-- v-on: 可以用简写@代替-->
<br>
<input type="text" v-on:keyup.enter="onEnter" v-model="gradeTwo" placeholder="要加的分数按enter">
<!-- 按下enter时加分 v-model绑定数据源 -->
</p>
</div>
<script typt="text/javascript">
var app = new Vue({
el:"#app",
// grade 分数
data:{
grade:0,
gradeTwo:1,
},
methods:{
score:function(){
this.grade++;
},
deduction:function(){
this.grade--;
},
// 绑定enter 键当按下时 input框
onEnter:function(){
this.grade+=parseInt(this.gradeTwo);
}
}
})
</script>
</body>
</html>
更多推荐
已为社区贡献4条内容
所有评论(0)