事件监听
01-v-on的基本使用
在v-on:click前面的计数器案例中使用了监听重复事件。这里在回顾一下:
使用v-on:click给按钮绑定监听事件以及某些函数,@是v-on:的语法糖,也就是简写也可以使用@click。方法一般是需要写方法名加上(),在@click中可以省掉,如上述的<button @click=“increment”>加。
<body>
<div id="app">
<h2>当前计数:{{conunter}}</h2>
<!-- <button v-on:click="conunter++">+</button>
<button v-on:click="conunter--">-</button> -->
<button type="button" v-on:click="add">+</button>
<button type="button" v-on:click="sub">-</button>
<!-- v-on的语法糖 -->
<button type="button" @click="add">+</button>
<button type="button" @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
conunter:0,
},
methods:{
add() {
console.log('add被执行了')
this.conunter++
},
sub() {
console.log('sub被执行了')
this.conunter--
}
}
})
</script>
</body>
02-v-on的参数传递
事件没传参,可以省略()
事件调用方法传参了,写函数时候省略了小括号,但是函数本身是需要传递一个参数的,这个参数就是原生事件event参数传递进去
如果同时需要预期某个参数,同时需要事件是,可以通过$event预期事件。
v-on修饰符的使用
常用的v-on的四个修饰符
.stop .prevent .once @keyup.enter
.stop 是为了防止程序冒泡执行
.prevent 是拦截默认事件
.once 绑定once的监听器只会触发一次,在第一次触发后该监听器会被remove掉。
.@keyup.enter 当松开键盘回车键 会执行你的代码块。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- .stop修饰符的使用 -->
<div @click="div">
aaaaaa
<button type="button" @click.stop="btn">按钮</button>
</div>
<!-- .prevent修饰符的使用 -->
<form action="adw">
<input type="submit"value="提交" @click.prevent="submit" />
</form>
<!-- 监听某个键盘的键帽的点击-->
<input type="text" @keyup.enter="jianP"/>
<!-- .once修饰符的使用 -->
<button type="button" @click.once="btn2">按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
message:"你好!"
},
methods:{
div() {
console.log('1')
},
btn() {
console.log('2')
},
submit() {
console.log('3')
},
jianP() {
console.log('4')
},
btn2() {
console.log('5')
}
}
})
</script>
</body>
</html>
条件判断
01-v-if v-else的使用 and v-else if 的使用
<body>
<div id="app">
<h2 v-if="isShow">
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
{{message}}
</h2>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
message:"你好!",
isShow:true
}
})
</script>
</body>
<body>
<div id="app">
<h2 v-if="isShow">
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
{{message}}
</h2>
<h1 v-else>isShow为false显示我</h1>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
message:"你好!",
isShow:true
}
})
</script>
</body>
<body>
<div id="app">
<span v-if="score>=90" >优秀</span>
<span v-else-if="score>=80">良好</span>
<span v-else-if="score>=60">及格</span>
<span v-else>不及格</span>
<h1>{{result}}</h1>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
score:123
},
computed:{
result() {
let shoumessage = '';
if(this.score >= 90){
shoumessage = '优秀'
} else if(this.score >= 80){
shoumessage = '良好'
} else if(this.score >= 60){
shoumessage = '及格'
}else{
shoumessage = '不及格'
}
return shoumessage;
}
}
})
</script>
</body>