标签：gray https spl text iso 动态 class utf-8 lock
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <style type="text/css"> li{list-style: none; width: 80px;height: 30px;line-height: 30px;display: inline-block;background-color: #ccc;text-align: center;margin: 5px;} .hover{background-color: gray;color: #fff;} #div1{width: 400px;height: 400px;background-color: darkgray;} </style> <body> <div id="app"> <ul> <li v-for="(item,index) in list" v-bind:class="{hover:index==isok}" @click="isok=index"> {{item.name}} </li> </ul> <div v-for="(item,index) in con" id="div1" v-show="isok==index"> {{item}} </div> </div> </body> <script type="text/javascript"> var vue=new Vue({ el:"#app", data:{ isok:0, list:[ {name:"个人主页"}, {name:"个人动态"}, {name:"个人相册"}, ], con:["这是个人首页","这是个人动态","这是个人相册"] } }) </script> </html>
标签：gray https spl text iso 动态 class utf-8 lock
原文地址：https://www.cnblogs.com/aomeng/p/11721895.html
