导航切换

等风也在等着你

于 2021-01-28 16:49:13 发布

阅读量87

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44860425/article/details/94392227

版权

VUE

vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="..双击查看原图de_modules双击查看原图ue/dist双击查看原图ue.js"></script>
    <style>
     .box{
         width: 100px;
         height: 100px;
         background: red;
     }
    
    </style>
</head>
<body>
     <div id="app">
         <button @click = fn>按钮</button>
         <button @click = fn1>按钮</button>
         <button @click = fn2>按钮</button>
         <div class="box" v-show = 'flag == 1'>1</div>
         <div class="box" v-show = 'flag == 2'>2</div>
         <div class="box" v-show = 'flag == 3'>3</div>
     </div>
 

     <script>
      let vm = new Vue({
        el:'#app',
        data:{
           flag:1,

        },
        methods:{
           fn(){
            this.flag = 1
           },
           fn1(){
            this.flag = 2
           },
           fn2(){
            this.flag = 3
           }
        }
    })
     
     </script>
</body>