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

更新時(shí)間：2022年03月01日 17:10:53 作者：_筱龍

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

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

實(shí)現(xiàn)步驟

實(shí)現(xiàn)靜態(tài)UI效果

用傳統(tǒng)的方式實(shí)現(xiàn)標(biāo)簽結(jié)構(gòu)和樣式

基于數(shù)據(jù)重構(gòu)UI效果

將靜態(tài)的結(jié)構(gòu)和樣式重構(gòu)為基于Vue模板語(yǔ)法的形式
處理事件綁定和js控制邏輯

聲明式編程

模板的結(jié)構(gòu)和最終顯示的效果基本一致

我們先把每組數(shù)據(jù)作為對(duì)象存儲(chǔ)在數(shù)組中

list: [{
? ? ? id: 1,
? ? ? title: 'apple',
? ? ? path: 'images/蘋(píng)果.jpg'
? ? ? }, {
? ? ? ? ?id: 2,
? ? ? ? ?title: 'orange',
? ? ? ? ?path: 'images/橘子.jpg'
? ? ? }, {
? ? ? ? ?id: 3,
? ? ? ? ?title: 'lemon',
? ? ? ? ?path: 'images/檸檬.jpg'
? ? ? }]

然后通過(guò)v-for對(duì)這個(gè)數(shù)組進(jìn)行遍歷，取到對(duì)應(yīng)的title值

<li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>

對(duì)圖片也進(jìn)行遍歷

<div :key='item.id' v-for='(item,index) in list'>
? ? ? <img src="item.path">
</div>

具體代碼如下

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

<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? .tab ul {
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ??
? ? ? ? .tab ul li {
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? float: left;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 45px;
? ? ? ? ? ? line-height: 45px;
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? border-top: 1px solid blue;
? ? ? ? ? ? border-right: 1px solid blue;
? ? ? ? ? ? border-bottom: 1px solid blue;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ??
? ? ? ? .tab ul li:first-child {
? ? ? ? ? ? border-left: 1px solid blue;
? ? ? ? }
? ? ? ??
? ? ? ? .tab ul li.active {
? ? ? ? ? ? background-color: orange;
? ? ? ? }
? ? ? ??
? ? ? ? .tab div {
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? display: none;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? font-style: 30px;
? ? ? ? ? ? line-height: 300px;
? ? ? ? ? ? border: 1px solid blue;
? ? ? ? ? ? border-top: 0px;
? ? ? ? }
? ? ? ??
? ? ? ? .tab div.current {
? ? ? ? ? ? margin-top: 0px;
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? display: block;
? ? ? ? }
? ? ? ??
? ? ? ? img {
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 300px;
? ? ? ? }
? ? </style>
</head>

<body>
? ? <div id="app">
? ? ? ? <div class="tab">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li v-on:click='change(index)' :class='currentIndex==index?" active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>

? ? ? ? ? ? </ul>
? ? ? ? ? ? <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item,index) in list'>
? ? ? ? ? ? ? ? <img :src="item.path">
? ? ? ? ? ? </div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <img src="images/檸檬.jpg">
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? ? <script type="text/javascript" src="js/vue.js"></script>
? ? <script type="text/javascript">
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? /*數(shù)據(jù)*/
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? currentIndex: 0,
? ? ? ? ? ? ? ? /*當(dāng)前索引*/
? ? ? ? ? ? ? ? list: [{
? ? ? ? ? ? ? ? ? ? id: 1,
? ? ? ? ? ? ? ? ? ? title: 'apple',
? ? ? ? ? ? ? ? ? ? path: 'images/蘋(píng)果.jpg'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id: 2,
? ? ? ? ? ? ? ? ? ? title: 'orange',
? ? ? ? ? ? ? ? ? ? path: 'images/橘子.jpg'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id: 3,
? ? ? ? ? ? ? ? ? ? title: 'lemon',
? ? ? ? ? ? ? ? ? ? path: 'images/檸檬.jpg'
? ? ? ? ? ? ? ? }]
? ? ? ? ? ? },

? ? ? ? ? ? /*js控制邏輯*/
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? // 在這里實(shí)現(xiàn)選項(xiàng)卡切換操作：本質(zhì)就是操作類(lèi)名
? ? ? ? ? ? ? ? // 如何操作類(lèi)名？就是通過(guò)currentIndex
? ? ? ? ? ? ? ? change: function(index) {
? ? ? ? ? ? ? ? ? ? this.currentIndex = index
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>

</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: