vue基础

Posted 2022-07-19 otways

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue基础相关的知识，希望对你有一定的参考价值。

<html>
    <head>
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            window.onload = function()
                new Vue(
                     el: "#app",
                     data: 
                        cur: 0,
                        tabtitil: [‘标题一‘,‘标题二‘,‘标题三‘,],
                        tabContent: [‘a‘,‘b‘,‘c‘],
                        cur2: 1,
                     
                )
             
        </script>
        
    </head>
    <body>
        <div id="app">
            <ul class="tab-tit">
                <li @click="cur = 0" :class="active:cur==0">标题一</li>
                <li @click="cur = 1" :class="active:cur==1">标题二</li>
                <li @click="cur = 2" :class="active:cur==2">标题三</li>
            </ul>
            <ul class="tab-con">
                <li v-show="cur==0">标题一</li>
                <li v-show="cur==1">标题二</li>
                <li v-show="cur==2">标题三</li>
            </ul>
            <ul class="tab-tit">
                <li v-for="(v,i) in tabtitil" @click="cur2=i" :class="active:cur2==i">v</li>
            </ul>
            <ul>
                <li v-for="(v,i) in tabContent" v-show="cur2===i">v</li>
            </ul>
        </div>
    </body>
    <style>
        ul,li 
            padding: 0;margin: 0
        
        .tab-tit li 
            padding: 10px 15px;
            text-align: center;
            list-style: none;
            cursor: pointer;
            display: inline-block;
        
        .tab-con li 
            padding: 10px 15px;
            text-align: center;
            list-style: none;
            cursor: pointer;
            display: inline-block;
        
    </style>
</html>

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

Vue入门:Vue基础

vue基础 —— 单网页版的Vue学习基础

vue基础

vue基础2--vue基础API