vue-3

<!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>
本站公众号
   欢迎关注本站公众号,获取更多程序园信息
开发小院