vue實現索引標籤小案例

2022-04-11 16:00:39
本文範例為大家分享了vue實現索引標籤小案例的具體程式碼，供大家參考，具體內容如下
<!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>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    ul {
        list-style: none;
    }
    
    #app {
        width: 480px;
        margin: 20px auto;
        border: 1px solid cornflowerblue;
    }
    
    ul {
        width: 100%;
        overflow: hidden;
    }
    
    ul li {
        float: left;
        width: 160px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background-color: #cccccc;
    }
    
    ul li a {
        text-decoration: none;
        color: black;
    }
    
    p {
        height: 200px;
        text-align: center;
        line-height: 200px;
        background-color: #fff;
    }
    
    li.active {
        background-color: cornflowerblue;
    }
    /* 有這個類名的p標籤，顯示 */
    
    p.active {
        display: block;
    }
    
    img {
        width: 100%;
    }
</style>
 
<body>
    <div id="app">
        <ul>
            <!-- :class中可以寫三元（index==cur?'active':''），也可以寫方法  :class相當於v-bind:class  -->
            <!--使用for遍歷li 要加上:key ，再新增一個點選事件-->
            <li :class="isActive(index)" v-for="(item,index) in list" :key="item.id" @click="toggle(index)">
                <!-- 通過插值把名字顯示到頁面 -->
                <a href="javascript:;" rel="external nofollow" >{{item.name}}</a>
            </li>
        </ul>
        <!-- v-show顯示，index和cur一樣才顯示 -->
        <!--使用for遍歷li 要加上:key ，再新增一個點選事件-->
        <p v-show="index==cur" v-for="(item,index) in list" :key="item.id">
            <!-- 只有用v-bind進行資料繫結 才能在src中使用item.img -->
            <img :src="item.img" alt="">
        </p>
    </div>
    <!-- 
    1.將所有的圖片都隱藏
    2.預設第一個按鈕有啟用的樣式
    3.點選哪一個按鈕，給哪一個按鈕新增啟用樣式
   -->
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            /* 資料 */
            data: {
                /* 定義一個顯示元素的索引 */
                cur: 0,
                list: [{
                    id: 1,
                    name: "鞠婧禕",
                    img: "./img/1.jpg"
                }, {
                    id: 2,
                    name: "李沁",
                    img: "./img/2.jpg"
                }, {
                    id: 3,
                    name: "易烊千璽",
                    img: "./img/3.jpg"
                }]
            },
            methods: {
                /* 判斷是否要啟用 */
                isActive(index) {
                    return index == this.cur ? "active" : ""
                },
                //  點選li標籤改變cur的值，實現切換效果
                // index是接受上面 @click中方法傳遞過來的index。
                toggle(index) {
                    this.cur = index
                }
            }
        })
    </script>
 
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
vue實現索引標籤小案例

熱門文章
