按钮案例


Vue按钮案例

首先还是上代码吧!希望大家不要直接复制,多打打

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> I'm a non-believer</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
  <body>
    <div id="app"></div>
</body>
<script>
    Vue.createApp({
            data(){
                return{
                    content:"",
                    setMeal:'every day anyway daze',
                    isShow: false,
                }
            },
            methods:{ //方法
                 WelcomeBtn(){
                    this.content="Yeah, I struggle with this bullshit every day"
                 },
                 ByeBtn(){
                    this.content="I break down, falling into love now with falling apart"
                 },
                 showday(){ 
                     this.isShow=!this.isShow
                 }
            },//content申请的变量 v-on:click绑定
            template:` <div>
                <div>{{content}}</div>
                <button v-on:click="WelcomeBtn">I'm a liar</button>&nbsp;
                <button v-on:click="ByeBtn"> I'm a cheater</button>
                <div>
                    <div v-if="isShow">{{setMeal}}</div>   
                    <button v-on:click="showday">obliterates</button>
                </div>
                </div>`
    }).mount("#app")
</script>
</html>
  • 我们在methods里添加两个方法,实现点击那个按钮出的一段话

  • v-on:click绑定

  • content是变量

    然后是一个可以隐藏显示的按钮,显示一段话,隐藏一段话,我们再创建一个setMea的变量,还有一个是否展示的变量isShow。注意这里涉及一个新的知识点,或者叫做新指令,就是v-if,它的作用是如果值为真,就显示这个DOM元素,如果为假,就不显示这个元素。


文章作者: Bibooo
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Bibooo !
评论
  目录