知识 | vue事件
2018-07-24 本文已影响0人
LuckyJin
一、事件修饰符
组织冒泡 .stop
优先触发 .capture
只有自己能触发，子元素无法触发 .self
只能提交一次 .once
阻止提交 .prevent
二、模拟toggle显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="div1">
<button @click = "toggle">切换显示隐藏</button>
<div v-if="show">默认这一条是看得见的</div>
</div>
</body>
</html>
<script>
new Vue({
el:'#div1',
data:{
show:true
},
methods:{
toggle:function () {
this.show = !this.show;
}
}
})
</script>
三、if-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="div1">
<button @click = "demoIfElse">切换显示隐藏</button>
<div v-if="show">if状态</div>
<div v-else>else状态</div>
</div>
</body>
</html>
<script>
new Vue({
el:'#div1',
data:{
show:false
},
methods:{
demoIfElse:function () {
this.show = Math.random()<0.1;
}
}
})
</script>
三、if-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="div1">
<button @click = "demoIfElseIf">切换显示隐藏</button>
<div v-if="number>98">大于98</div>
<div v-else-if="number>95">大于95</div>
<div v-else-if="number>90">大于90</div>
<div v-else-if="number>80">大于80</div>
<div v-else-if="number>70">大于70</div>
<div v-else-if="number>60">大于60</div>
<div v-else-if="number>50">大于50</div>
<div v-else-if="number>40">大于40</div>
<div v-else-if="number>30">大于30</div>
<div v-else-if="number>20">大于20</div>
<div v-else>else状态</div>
</div>
</body>
</html>
<script>
new Vue({
el:'#div1',
data:{
number:0
},
methods:{
demoIfElseIf:function () {
this.number = Math.random()*100;
}
}
})
</script>
