ClassContent/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/VUE基础/tab-vue版.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .title {
            display: flex;
        }

        .title li {
            margin-right: 10px;
        }

        .title .active {
            color: red;
        }

        .content li {
            display: none;
        }

        .content .active {
            display: block;
        }
    </style>
</head>

<body>

    <div class="add">
        <!-- <ul class="title">
            <li :class=" i == index ? 'active' : '' " v-for="v,i in arr" @click="index = i" :key="i">
                {{ v.title }}
            </li>
        </ul>
        <ul class="content">

            <li :class=" i == index ? 'active' : '' " v-for="v,i in arr" :key="i">
                <p v-for="item,index in v.content">{{ item.text }}</p>
            </li>
        </ul> -->





        <p>{{text}}</p>

        <p v-text="imgSrc"></p>

        <!-- v-html -->
        <div v-html="imgSrc"></div>
        <p></p>

        <!-- v-for -->
        <ul>
            <li v-for="v,i in news">{{v.id}}|{{v.title}}</li>
        </ul>
        <p></p>
        <div v-for="value,key in obj">{{key}}:{{value}}</div>

        <!-- v-bind 简写‘:’ -->
        <img :src="img" alt="">

        <!-- v-if -->
        <div v-if="type==0">一级会员</div>
        <div v-else-if="type==1">二级会员</div>
        <div v-else>请登录</div> <!-- <div v-else="type==2">请登录</div> -->

        <!-- v-show -->
        <div v-show="show">嘻嘻嘻</div>
        <p></p>

        <!-- v-model （input、select、textarea都适用）-->
        <input type="text" placeholder="请输入" v-model="name">{{name}}
        <p></p>

        <!-- v-on 简写‘@’ -->
        <button v-on:click="Button">登录</button>
        <!-- <button @click="Button">登录</button> -->
        <p></p>

        <!-- tab切换 -->
        <!-- <ul class="title">
            <li :class="i==Index?'active':''" v-for="v,i in arr" :key="i" @click="change(i)">{{v.title}}</li>
        </ul>
        <ul class="content">
            <li :class="i==Index?'active':''" v-for="v,i in arr" :key="i">
                <p v-for="ele,index in v.content" :key="index">{{ele.text}}</p>
            </li>
        </ul> -->

        <ul class="title">
            <li :class="i==Index?'active':''" v-for="v,i in arr" :key="i" @click="change(i)">{{v.title}}</li>
        </ul>
        <ul class="content">
            <li :class="i==Index?'active':''" v-for="v,i in arr" :key="i">
                <p v-for="a,b in v.content">{{a.text}}</p>
            </li>
        </ul>

    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
    new Vue({
        el: ".add",
        data: {
            // index: 0,
            arr: [
                {
                    title: '首页',
                    content: [
                        { text: '首页的内容1' },
                        { text: '首页的内容2' },
                        { text: '首页的内容3' },
                        { text: '首页的内容4' },
                        { text: '首页的内容5' },
                    ]
                },
                {
                    title: '社会',
                    content: [
                        { text: '社会 的内容1' },
                        { text: '社会 的内容2' },
                        { text: '社会 的内容3' },
                        { text: '社会 的内容4' },
                    ]
                },
                {
                    title: '军事',
                    content: [
                        { text: '军事 的内容1' },
                        { text: '军事 的内容2' },
                        { text: '军事 的内容3' },
                    ]
                },
                {
                    title: '科技',
                    content: [
                        { text: '科技 的内容1' },
                        { text: '科技 的内容2' },
                        { text: '科技 的内容3' },
                    ]
                }
            ],
            text: '1111',
            imgSrc: `<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="">`,
            news: [
                { id: 1, title: 'a' },
                { id: 2, title: 'b' },
                { id: 3, title: 'c' }
            ],
            obj: { id: 1, title: 'a' },
            img: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
            type: 2,
            show: false,
            name: '',
            Index: 0
        },

        // 所有方法存放地方
        methods: {
            Button() {
                console.log("Button:", this.name);
            },
            // change(index) {
            //     this.index = index
            // }
            change(index) {
                this.Index = index
                console.log(index);
            }
        }
    })
</script>

</html>