Vue实现选项卡效果

          <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8">
          <title>选项卡</title>
          <script src="../vue.js"></script>
                        <style>
                               *{
                                 padding: 0px;
                                 margin: 0px;
                                 }
 
                               .wrapper{
                                  margin: 50px auto;
                                  width: 450px;
                                  height:400px;
                                  border: 1px solid #000;
                                 }
                               .nav{
                                  list-style: none;
                                   width: 450px;
                                   height: 80px;
                                  font-size: 0px;
                                }
                               .nav li{
                                   width: 148px;
                                   height:80px;
                                   font-size: 16px;
                                  border: 1px solid #000;
                                  display: inline-block;
                                  text-align: center;
                                   line-height: 80px
                                 }
                              .content div{
                                 width: 450px;
                                 height: 320px;
                                  text-align: center;
                                  line-height: 320px;
                                 background:pink; 
                                  }
                              .primary{
                                background:red
                                }
                              .default{
                                 background:#aaa;
                               }
                         </style>
       </head>

       <body>
           <div id='app'>
                  <div class='wrapper'>
                           <ul class='nav'>
                                 <li v-for='(item,index) in list'
                                @click='sel(index)'
                                   :class='index==selIndex?"primary":"default"'
                                   >{{item.title}}</li>
                             </ul>
                             <div class='content'>
                                  <div v-for='(item,index) in list'
                                  v-if='index==selIndex'
                                 >{{item.info}}</div>
  
                             </div>
                   </div>
           </div>



          <script>
            new Vue({
                el:'#app',
                data:{ 
                 list:[{title:'荷花',info:'小荷才露尖尖角，早有蜻蜓立上头'},
                      {title:'菊花',info:'采菊东篱下，悠然见南山'},
                      {title:'梅花',info:'墙角数枝梅，凌寒独自开'}],
                selIndex:0
                },
              methods: {
                     sel(index){
                         this.selIndex=index
                     }
               },
           })

        </script>
        </body>
        </html>

posted @ 2019-06-12 20:10 荷风伊夏阅读(319) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

荷风伊夏

Vue实现选项卡效果

公告