vue實(shí)現(xiàn)選項(xiàng)卡小案例

更新時(shí)間：2022年04月11日 11:48:00 作者：清酒獨(dú)酌

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)選項(xiàng)卡小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)選項(xiàng)卡小案例的具體代碼，供大家參考，具體內(nèi)容如下

<!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;
? ? }
? ? /* 有這個(gè)類名的p標(biāo)簽，顯示 */
? ??
? ? p.active {
? ? ? ? display: block;
? ? }
? ??
? ? img {
? ? ? ? width: 100%;
? ? }
</style>
?
<body>
? ? <div id="app">
? ? ? ? <ul>
? ? ? ? ? ? <!-- :class中可以寫三元（index==cur?'active':''），也可以寫方法 ?:class相當(dāng)于v-bind:class ?-->
? ? ? ? ? ? <!--使用for遍歷li 要加上:key ，再添加一個(gè)點(diǎn)擊事件-->
? ? ? ? ? ? <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 ，再添加一個(gè)點(diǎn)擊事件-->
? ? ? ? <p v-show="index==cur" v-for="(item,index) in list" :key="item.id">
? ? ? ? ? ? <!-- 只有用v-bind進(jìn)行數(shù)據(jù)綁定 才能在src中使用item.img -->
? ? ? ? ? ? <img :src="item.img" alt="">
? ? ? ? </p>
? ? </div>
? ? <!--?
? ? 1.將所有的圖片都隱藏
? ? 2.默認(rèn)第一個(gè)按鈕有激活的樣式
? ? 3.點(diǎn)擊哪一個(gè)按鈕，給哪一個(gè)按鈕添加激活樣式
? ?-->
? ? <script src="../vue.js"></script>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el: "#app",
? ? ? ? ? ? /* 數(shù)據(jù) */
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? /* 定義一個(gè)顯示元素的索引 */
? ? ? ? ? ? ? ? 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" : ""
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? // ?點(diǎn)擊li標(biāo)簽改變cur的值，實(shí)現(xiàn)切換效果
? ? ? ? ? ? ? ? // index是接受上面 @click中方法傳遞過來的index。
? ? ? ? ? ? ? ? toggle(index) {
? ? ? ? ? ? ? ? ? ? this.cur = index
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
?
</body>
</html>