vue第二天案例（留言板）

最新推荐文章于 2022-10-16 18:19:04 发布

wh15364622604

最新推荐文章于 2022-10-16 18:19:04 发布

阅读量152

点赞数

文章标签： vue.js servlet javascript

本文链接：https://blog.csdn.net/wh15364622604/article/details/126017401

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           * {
               padding: 0;
               margin: 0;
           }

           button {
               width: 100px;
               height: 30px;

}

           .active {
               color: #fff;
               background: blue;
           }

           ul {
               width: 300px;
               height: 300px;
               position: relative;
               border: 1px solid red;
           }

           li {
               height: 100%;
               position: absolute;
               list-style: none;
               display: none;
           }

           .active1 {
               display: block;
           }
       </style>
   </head>
   <body>
       <div class="box">
           <button @click="change(index)" :class="index==ind?'active':''" v-for="(item,index) in obj">{{item.title}}</button>
           <ul>
               <li :class="index==ind?'active1':''" v-for="(item,index) in obj">{{item.content}}</li>
           </ul>
       </div>
   </body>
   <script src="vue.js"></script>
   <script>
       var vm = new Vue({
           el:".box",
           data:{
               ind:"",
               obj:[
               {
                   title:"卡一",
                   content:"卡一",
                   id:"11"
               },
               {
                   title:"卡二",
                   content:"卡二",
                   id:"12"
               },
               {
                   title:"卡三",
                   content:"卡三",
                   id:"13"
               },
               ]
           },
           methods:{
               change(index){
                   this.ind=index;
               }
           }
       })
   </script>
</html>