3 methods、v-on、v-if

谁借莪1个温暖的怀抱¢ 2023-10-06 20:20 83阅读 0赞

Vue3显示,来宾欢迎语

  • 场景
  • 编写页面的基本结构
  • Vue3的绑定事件和事件方法
  • 显示隐藏套餐服务

场景

这篇文章先来完成来宾欢迎语展示的需求。

methods 属性给 Vue 定义方法。

编写页面的基本结构

在项目根目录,新建一个目录 Demo3.html,然后复制 Demo1.html 里边的代码。

复制后,你可以修改一下<title>,加上青青大宝剑城,然后修改代码,增加 content 变量。具体代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>青青大宝剑城</title>
  7. <script src="https://unpkg.com/vue@next"></script>
  8. </head>
  9. <body>
  10. <div id="app"></div>
  11. </body>
  12. <script>
  13. Vue.createApp({
  14. data(){
  15. return{
  16. content:'欢迎你的光临,贵宾一位!'
  17. }
  18. },
  19. template: '<div>{
  20. {content}}</div>'
  21. }).mount("#app")
  22. </script>
  23. </html>

接下来我们要作的事情是写两个按钮,当顾客来的时候,我们显示欢迎你的光临,贵宾一位!,当顾客离开的时候,我们显示欢迎下次光临,真空套餐下次8折优惠。

现在来写两个按钮,修改template代码部分。

  1. template: `<div>
  2. <div>{
  3. {content}}</div>
  4. <button>有顾客来</button>
  5. <button>顾客离开</button>
  6. </div>`

Vue3的绑定事件和事件方法

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

  1. <script>
  2. Vue.createApp({
  3. data() {
  4. return {
  5. content: '欢迎你的光临,贵宾一位!'
  6. }
  7. },
  8. methods: {
  9. welcomeBtnClick() {
  10. alert('111')
  11. },
  12. byeBtnClick() {
  13. alert('2222')
  14. },
  15. },
  16. template: `<div>
  17. <div>{
  18. {content}}</div>
  19. <button v-on:click="welcomeBtnClick">有顾客来</button>
  20. <button v-on:click="byeBtnClick">顾客离开</button>
  21. </div>`
  22. }).mount("#app")
  23. </script>

写完这部就可以在浏览器测试一下,你写的代码是否好用。正常后,你需要修改响应事件的方法。

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

这个时候我们看一下效果:

在这里插入图片描述
好了这个例子我们就写完了,那现在回顾一下,我们通过这个例子都学到了什么?

首先是我们了解 v-on 这种指令的使用,用来绑定对应的事件。

然后我们又学了如何在Vue里写一个相应事件的方法。除了这两个知识外,你也能更深一层体验到什么是面向数据编程,而不再是面向DOM编程。

希望你对本文有所收获,记得手写代码哦。

显示隐藏套餐服务

由于服务的特殊性,老板要求我们能隐藏一些特殊有吸引力的套餐服务,只有VIP顾客才可以展示出来。于是我们开始编写代码。

明确需求后,我们需要新生成一个套餐的变量 setMeal,然后还要有一个是否展示的变量isShowMeal

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

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

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

有了变量,有了方法,这时候就可以写模板中的代码了,注意这里涉及一个新的知识点,或者叫做新指令,就是 v-if,它的作用是如果值为真,就显示这个DOM元素,如果为假,就不显示这个元素。

  1. template: `<div>
  2. <div>{
  3. {content}}</div>
  4. <button v-on:click="welcomeBtnClick">有顾客来</button>
  5. <button v-on:click="byeBtnClick">顾客离开</button>
  6. <div>
  7. <div v-if="isShowMeal" >{
  8. {setMeal}}</div>
  9. <button v-on:click="showOrHideBtnClick">显示/隐藏套餐</button>
  10. </div>
  11. </div>`

这时候就能通过一个按钮,随时进行菜单的隐藏和显示了。

在这里插入图片描述
通过这两个小需求,相信你已经对Vue的编写方法有了最基本的了解,下篇文章我们来为我们的大宝剑城,加入一些佳丽。希望小伙伴们继续关注。

为了方便学习,给出整个文件代码。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>青青大宝剑城</title>
  7. <script src="https://unpkg.com/vue@next"></script>
  8. </head>
  9. <body>
  10. <div id="app"></div>
  11. </body>
  12. <script>
  13. Vue.createApp({
  14. data() {
  15. return {
  16. content: '',
  17. setMeal: '真空套餐 帝王套餐 夏日套餐 学生套餐',
  18. isShowMeal: false
  19. }
  20. },
  21. methods: {
  22. welcomeBtnClick() {
  23. this.content = "欢迎你的光临,贵宾一位!"
  24. },
  25. byeBtnClick() {
  26. this.content = "欢迎下次光临,真空套餐下次8折优惠"
  27. },
  28. showOrHideBtnClick() {
  29. this.isShowMeal = !this.isShowMeal
  30. }
  31. },
  32. template: `<div>
  33. <div>{
  34. {content}}</div>
  35. <button v-on:click="welcomeBtnClick">有顾客来</button>
  36. <button v-on:click="byeBtnClick">顾客离开</button>
  37. <div>
  38. <div v-if="isShowMeal" >{
  39. {setMeal}}</div>
  40. <button v-on:click="showOrHideBtnClick">显示/隐藏套餐</button>
  41. </div>
  42. </div>`
  43. }).mount("#app")
  44. </script>
  45. </html>

发表评论

表情:
评论列表 (有 0 条评论,83人围观)

还没有评论,来说两句吧...

相关阅读

    相关 3.3 字符串

    3.3.1 字符串的常用定义方式 (1)单引号定义方式 (2)双引号定义方式 \\(3)三引号定义方式 package com.msb.test01

    相关 3.3 放苹果

    > 将递归的问题分解为子问题来做(分类) ![70][] > 当m、n很大时,要用动态规划来做,否则会超时。 ![70 1][] ![70 2][] > 主要分为两大

    相关 3-3 Java反射

    目录 一.反射概念 二.类对象概念和获取方式 三.获取类的信息和类的类型 四.获取继承关系 五.获取构造方法信息 并创建对象 六.获取字段信息 获取和设置字段的值