欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)選項(xiàng)卡功能

 更新時(shí)間：2022年03月01日 14:31:25   作者：gs981600308  
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

原理分析和實(shí)現(xiàn)

這個(gè)很簡(jiǎn)單，無(wú)非就是一個(gè)點(diǎn)擊切換顯示而已。但是大家也要實(shí)現(xiàn)。如果這個(gè)看明白了，再看下面兩個(gè)！這個(gè)實(shí)例應(yīng)該只是一個(gè)熱身和熟悉的作用！

這個(gè)的步驟只有一步，原理也沒(méi)什么。我直接在代碼打注釋?zhuān)戳俗⑨專(zhuān)蠹揖兔靼琢耍?/p> 

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
</head>
<style>
? ? body{
? ? ? ? font-family:"Microsoft YaHei";
? ? }
? ? #tab{
? ? ? ? width: 600px;
? ? ? ? margin: 0 auto;
? ? }
? ? .tab-tit{
? ? ? ? font-size: 0;
? ? ? ? width: 600px;
? ? }
? ? .tab-tit a{
? ? ? ? display: inline-block;
? ? ? ? height: 40px;
? ? ? ? line-height: 40px;
? ? ? ? font-size: 16px;
? ? ? ? width: 25%;
? ? ? ? text-align: center;
? ? ? ? background: #ccc;
? ? ? ? color: #333;
? ? ? ? text-decoration: none;
? ? }
? ? .tab-tit .cur{
? ? ? ? background: #09f;
? ? ? ? color: #fff;
? ? }
? ? .tab-con div{
? ? ? ? border: 1px solid #ccc;
? ? ? ? height: 400px;
? ? ? ? padding-top: 20px;
? ? }
</style>
<body>
<div id="tab">
? ? <div class="tab-tit">
? ? ? ? <!--點(diǎn)擊設(shè)置curId的值 ?如果curId等于0，第一個(gè)a添加cur類(lèi)名，如果curId等于1，第二個(gè)a添加cur類(lèi)名，以此類(lèi)推。添加了cur類(lèi)名，a就會(huì)改變樣式 @click,:class ,v-show這三個(gè)是vue常用的指令或添加事件的方式-->
? ? ? ? <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>
? ? ? ? <a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>
? ? ? ? <a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>
? ? ? ? <a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>
? ? </div>
? ? <div class="tab-con">
? ? ? ? <!--根據(jù)curId的值顯示div,如果curId等于0，第一個(gè)div顯示，其它三個(gè)div不顯示。如果curId等于1，第二個(gè)div顯示，其它三個(gè)div不顯示。以此類(lèi)推-->
? ? ? ? <div v-show="curId===0">
? ? ? ? ? ? html<br/>
? ? ? ? </div>
? ? ? ? <div v-show="curId===1">
? ? ? ? ? ? css
? ? ? ? </div>
? ? ? ? <div v-show="curId===2">
? ? ? ? ? ? javascript
? ? ? ? </div>
? ? ? ? <div v-show="curId===3">
? ? ? ? ? ? vue
? ? ? ? </div>
? ? </div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
? ? new Vue({
? ? ? ? el: '#tab',
? ? ? ? data: {
? ? ? ? ? ? curId: 0
? ? ? ? },
? ? ? ? computed: {},
? ? ? ? methods: {},
? ? ? ? mounted: function () {
? ? ? ? }
? ? })
</script>
</html>

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

相關(guān)文章

  • vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處

    vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處

    今天小編就為大家分享一篇關(guān)于vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
    2019-01-01
  • 詳解VueJs中的V-bind指令

    詳解VueJs中的V-bind指令

    v-bind 主要用于屬性綁定，比方你的class屬性，style屬性，value屬性，href屬性等等，只要是屬性，就可以用v-bind指令進(jìn)行綁定.這篇文章主要介紹了VueJs中的V-bind指令,需要的朋友可以參考下
    2018-05-05
  • vue實(shí)現(xiàn)簡(jiǎn)易圖片左右旋轉(zhuǎn),上一張,下一張組件案例

    vue實(shí)現(xiàn)簡(jiǎn)易圖片左右旋轉(zhuǎn),上一張,下一張組件案例

    這篇文章主要介紹了vue實(shí)現(xiàn)簡(jiǎn)易圖片左右旋轉(zhuǎn),上一張,下一張組件案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • vue項(xiàng)目使用uniapp生成app的全過(guò)程

    vue項(xiàng)目使用uniapp生成app的全過(guò)程

    這篇文章主要介紹了vue項(xiàng)目使用uniapp生成app的全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue進(jìn)度條progressbar組件功能

    Vue進(jìn)度條progressbar組件功能

    progressbar組件在一個(gè)可以直接運(yùn)行的npm包，通過(guò)Yeoman進(jìn)行構(gòu)建，再通過(guò)Gulp+Webpack構(gòu)建工具。這篇文章給大家介紹了Vue進(jìn)度條progressbar組件
    2018-04-04
  • Vue使用枚舉類(lèi)型實(shí)現(xiàn)HTML下拉框步驟詳解

    Vue使用枚舉類(lèi)型實(shí)現(xiàn)HTML下拉框步驟詳解

    本文分步驟給大家介紹了Vue使用枚舉類(lèi)型實(shí)現(xiàn)HTML下拉框的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
    2018-02-02
  • 詳解vue數(shù)據(jù)渲染出現(xiàn)閃爍問(wèn)題

    詳解vue數(shù)據(jù)渲染出現(xiàn)閃爍問(wèn)題

    本篇文章主要介紹了vue數(shù)據(jù)渲染出現(xiàn)閃爍問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • 在vue項(xiàng)目中封裝echarts的步驟

    在vue項(xiàng)目中封裝echarts的步驟

    這篇文章主要介紹了在vue項(xiàng)目中封裝echarts的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
    2020-12-12
  • vue 實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)更改頁(yè)面title

    vue 實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)更改頁(yè)面title

    今天小編就為大家分享一篇vue 實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)更改頁(yè)面title，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-11-11
  • 修改vue+webpack run build的路徑方法

    修改vue+webpack run build的路徑方法

    今天小編就為大家分享一篇修改vue+webpack run build的路徑方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09

最新評(píng)論