vue-3

Posted 2020-11-16 aomeng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于vue-3的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

片段和活动之间的核心区别是啥？哪些代码可以写成片段？

企业级低代码平台，JeecgBoot-Vue3版 v1.3.0 版本正式发布

VSCode自定义代码片段——.vue文件的模板