抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

第三课主要讲的是事件的绑定,故事的背景是个澡堂子
首先创建基本DOM结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大众浴池</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
data(){
return{
content: '',
setMeal: '真空套餐 帝王套餐 夏日套餐 学生套餐',
isShowMeal: false
}
},
template: '<div>{{content}}</div>'
}).mount("#app")
</script>
</html>

然后写两个按钮,使用v-on:click绑定事件。顾客来的时候显示欢迎光临,顾客走的时候显示欢迎下次光临

1
2
3
4
template: `<div>{{content}}</div>
<button v-on:click="welcomeBtnClick">有顾客来</button>&nbsp;
<button v-on:click="byeBtnClick">顾客离开</button>
</div>`

接下来需要给两个按钮绑定事件,这里绑定的事情跟原生方法不一样,需要写成下面的样子。然后在methods属性里加入两个方法welcomeBtnClick和byeBtnClick。

1
2
3
4
5
6
7
8
methods: {
welcomeBtnClick() {
this.content = "欢迎你的光临,贵宾一位!"
},
byeBtnClick() {
this.content = "欢迎下次光临,下次8折优惠"
},
},

这样点击按钮就能看到文字变化了。然后老板增加了新需求,要显示一些隐藏的套餐服务。我们需要新生成一个套餐的变量setMeal,然后还要有一个是否展示的变量isShowMeal

1
2
3
4
5
6
7
 data() {
return {
content: '',
setMeal: '帝王套餐 夏日套餐 学生套餐',
isShowMeal: false
}
},

有了这个变量之后,我们还需要有一个能改变isShowMeal的响应方法showOrHideBtnClick用来控制套餐的显示很隐藏。

1
2
3
showOrHideBtnClick() {
this.isShowMeal = !this.isShowMeal
}

变量和方法有了,改变模板中的代码,使用v-if来控制元素的显示隐藏,值为真的时候显示里边的元素

1
2
3
4
5
6
7
8
9
10
template: `<div>
<div>{{content}}</div>
<button v-on:click="welcomeBtnClick">有顾客来</button>&nbsp;
<button v-on:click="byeBtnClick">顾客离开</button>
<div>
<div v-if="isShowMeal" >{{setMeal}}</div>

<button v-on:click="showOrHideBtnClick">显示/隐藏套餐</button>
</div>
</div>`

这时候就能通过一个按钮,随时进行菜单的隐藏和显示了。
最后整个代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大众浴池</title>
<script src="https://unpkg.com/vue@next"></script>
</head>

<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
data() {
return {
content: '',
setMeal: '帝王套餐 夏日套餐 学生套餐',
isShowMeal: false
}
},
template: `<div>
<div>{{content}}</div>
<button v-on:click="welcomeBtnClick">有顾客来</button>&nbsp;
<button v-on:click="byeBtnClick">顾客离开</button>
<div>
<div v-if="isShowMeal" >{{setMeal}}</div>

<button v-on:click="showOrHideBtnClick">显示/隐藏套餐</button>
</div>
</div>`,
methods: {
welcomeBtnClick() {
this.content = "欢迎你的光临,贵宾一位!"
},
byeBtnClick() {
this.content = "欢迎下次光临,下次8折优惠"
},
showOrHideBtnClick() {
this.isShowMeal = !this.isShowMeal
}
},
}).mount("#app")
</script>

</html>

评论