Vue 实现简单的选项卡

最新推荐文章于 2023-06-07 17:52:54 发布

weixin_33727510

最新推荐文章于 2023-06-07 17:52:54 发布

阅读量155

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cbbde3a5188257ab6105f3f

版权

思路：通过传参的形式控制对应的显示隐藏

<!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>vue初体验</title>
    <script src="../js/vue221.js"></script>
    <style>
    .active{
        color:red;
    }
    </style>
</head>
<body>
   <div id="app">
    <ul>
        <li @click="fn1(1)">1</li>
        <li @click="fn1(2)">2</li>
        <li @click="fn1(3)">3</li>
    </ul>
    <div v-if="a==1">1</div>
    <div v-if="a==2">2</div>
    <div v-if="a==3">3</div>
   </div>
    <script>
       var vm=new Vue({
           el:"#app",
           data:{
             a:1
           },
           methods:{
            fn1:function(x){
                this.a=x
            }
           }
       })
    </script>
</body>
</html>
复制代码

weixin_33727510

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 实现简单的选项卡

思路：通过传参的形式控制对应的显示隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
复制链接

扫一扫