3 methods、v-on、v-if

场景

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

methods 属性给 Vue 定义方法。

编写页面的基本结构

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

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

DOCTYPE html>



    
    
    青青大宝剑城
    


    


    Vue.createApp({
        data(){
            return{
                content:'欢迎你的光临，贵宾一位！'
            }
        },
        template: '
{{content}}
'
    }).mount("#app")

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

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

template: `
    {{content}}
    有顾客来 
    顾客离开
`

Vue3的绑定事件和事件方法

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

    Vue.createApp({
        data() {
            return {
                content: '欢迎你的光临，贵宾一位！'
            }
        },
        methods: {
            welcomeBtnClick() {
                alert('111')
            },
            byeBtnClick() {
                alert('2222')
            },
        },
        template: `

                      
{{content}}
                     有顾客来 
                      顾客离开
                   
`
    }).mount("#app")

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

methods: {
    welcomeBtnClick() {
        this.content = "欢迎你的光临，贵宾一位！"
    },
    byeBtnClick() {
        this.content = "欢迎下次光临，真空套餐下次8折优惠"
    },
},

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

好了这个例子我们就写完了，那现在回顾一下，我们通过这个例子都学到了什么？

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

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

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

显示隐藏套餐服务

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

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

data() {
    return {
        content: '',
        setMeal: '真空套餐  帝王套餐  夏日套餐 学生套餐',
        isShowMeal: false
    }
},

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

showOrHideBtnClick() {
    this.isShowMeal = !this.isShowMeal
}

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

template: `
            {{content}}
            有顾客来 
            顾客离开
            
                {{setMeal}}

                显示/隐藏套餐
            
        `

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

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

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

DOCTYPE html>



    
    
    青青大宝剑城
    



    


    Vue.createApp({
        data() {
            return {
                content: '',
                setMeal: '真空套餐  帝王套餐  夏日套餐 学生套餐',
                isShowMeal: false
            }
        },
        methods: {
            welcomeBtnClick() {
                this.content = "欢迎你的光临，贵宾一位！"
            },
            byeBtnClick() {
                this.content = "欢迎下次光临，真空套餐下次8折优惠"
            },
            showOrHideBtnClick() {
                this.isShowMeal = !this.isShowMeal
            }
        },
        template: `

                        
{{content}}
                        有顾客来 
                        顾客离开
                        

                            
{{setMeal}}

                            显示/隐藏套餐
                        
                   
`
    }).mount("#app")