vue小練習——選項卡切換

阿新 • • 發佈：2018-11-30

上午做了個選項卡的小練習，很簡單，可以熟悉語法吧。
上程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
    body{
        font-family 
:"Microsoft YaHei";
    }
    #tab{
        width: 450px;
        height: 280px;
        margin: 0 auto;
        border: 1px solid cornflowerblue;
    }
    .tab-tit{
        font-size: 0;
        width: 450px;
        height: 40px;
    }
    .tab-tit a{
    	float: left;
        display: inline-block;
        height 
: 40px;
        line-height: 40px;
        font-size: 16px;
        width: 33.33%;
        text-align: center;
        background: #ccc;
        color: #333;
        text-decoration: none;
    }
    .tab-tit .cur{
        background: #09f;
        color: #fff;
    }
    .tab-con{
    	width: 100%;
    	text-align 
: center;
    }
    .tab-con span{
    	display: block;
    	margin-top: 100px;
    }
</style>
<body>
<div id="tab" >
    <div class="tab-tit" >
        <a href="javascript:;" v-for="(item,index) in tit" @click="skip(index)" :class="{'cur':item.curId===1}">{{item.title}}</a>
    </div>
    <div class="tab-con">
          <span v-text="span_data"></span>
    </div>
    </div>
</div>
</body>
<script>
  var vu=new Vue({
        el: '#tab',
        data: {
        	tit:[
	    {
            curId: 1,
            title:'html'
        },
         {
            curId: 0,
            title:'css'
        },
         {
            curId: 0,
            title:'javascript'
        },
	    ],
	    span_data:'html'
        },
        methods: {
        	skip:function(index){
        		for(var i=0;i<this.tit.length;i++){
        		this.tit[i].curId=0;
        		}
        		this.tit[index].curId=1;
        		this.span_data=this.tit[index].title;
        	}
        },
      
    })
</script>
</html>

【總結】
1、對於v-for的迴圈體有了更清楚的瞭解。
2、v-text={{}}，而且v-text是單向繫結，也就是當vue裡的物件值改變時頁面顯示的值會改變，但是頁面值改變不會影響物件值。但是v-model可以實現雙向繫結。v-model用於input，select等表單元素。其他地方使用不起作用。

vue小練習——選項卡切換

上午做了個選項卡的小練習，很簡單，可以熟悉語法吧。上程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titl

微信小程式選項卡切換+swiper自適應高度

如圖所示一個，具體步驟如下：一、wxml部分 <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" b

微信小程式選項卡切換

在開發微信小程式的時候，會遇到選項卡切換，這裡有一個小例子，可以做為參考，程式碼如下結構部分: <view class="swiper-tab"> <view class=

實現vue-router來完成選項卡切換

spa utf bar -- 出口 ont view 通過 asc <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue-route

小程式多個選項卡切換（商品評論）

選項卡的功能用途有很多地方：例如商品評論的切換，還有文章分類還有各種各樣的切換功能需要用到。這個實現是通過for迴圈，取數值下標的方式來實現切換 test.wxml <view class='content'> <view class='tab {{idx == in

vue實現選項卡切換效果

效果如下：說明：這裡我使用的原理是利用vue中的v-show/顯示隱藏指令，當為true的時候顯示，為false的時候隱藏 1html程式碼： <head> <meta charset="UTF-8"> <base target="_blan

微信小程式選項卡頁面切換

選項卡效果切換如下：滑動即可對應切換 wxml程式碼 <view class='TabSwiper'> <view class='tab {{currentData

小程式選項卡操作同時支援左滑右滑實現選項卡切換功能

在這裡用了一下swiper原理：但是出現了一個問題，父級高度為0，子元素全部不顯示，檢視原因，是因為swiper預設為position：absolute，定位導致的，所以需要在style上計算出他當前的高度並且渲染在頁面上，另一個問題是，當前的高度預設為px，而小程式支援的是

vue.js 選項卡切換對img設定不同的圖片

<img id="img_shared" :src="shared" style="margin-left: 25px;" > 給img標籤設定src 引入兩張圖片選項卡切換的時候設定不同的圖片 import shared_nor from '..

初學Vue筆記——選項卡切換功能

　　在沒有學習Vue之前，想要做一個Tabs切換功能，首先想到的當然是通過DOM操作改變元素的class。然而Vue操作的是資料，雖然在方法中可以隨心所欲得寫原生js程式碼來操作DOM，但這會非常彆扭。初學者使用Vue的時候一定要切換一下思維。 <style>

微信小程式選項卡陣列列表單項選擇切換效果

這裡展示一個工作中用到的微信小程式的單選選項卡切換效果的製作方法效果如圖： wxml: <view class="item" wx:for="{{data}}" wx:for-

Angular頁面選項卡切換要註意的toggleClass

一個 blog clas lin link ren str cnblogs attrs 在第一，第二篇隨筆中寫到的選項卡切換，我回頭看了看發現缺少了一個很重要的部分，那就是toggleClass。 //在js控制器中必須寫明指令，要不然在頁面寫了toggle-class=“

類似選項卡切換翻頁

fun apps index har 選項 image brush css 按鈕 <!DOCTYPE html> <html> <head> <title></title> <meta charset=

javascript實現選項卡切換的4種方法

ivar ack doc width -s utf tel 選項定義方法一：for循環+if判斷當前點擊與自定義數組是否匹配 <html lang="en"> <head> <meta charset="UTF-8"> &l

小程序選項卡，可左右滑動

size var 內容右滑 tom return else tail tro wxhtml: <view class="swiper-tab"> 　　<view class="tab-item swiper-tab-item {{currentTab=

AxureRP分頁簽 / Tab選項卡切換功能~

info 雙擊加背景編輯 alt idt 拖動選項卡切換調整最終結果圖如下：實現過程： 1、從元件庫中拖一個動態面板，調整所需大小，接下來的步驟都通過雙擊動態面板來完成。 2、雙擊動態面板，彈出框“面板狀態管理”，新建狀態並命名。此處新建了TAB1、TAB2、T

js實現tab選項卡切換

　　通過原生js實現tab切換，首先講解一下實現的原理。　　　　1.點選按鈕首先給這個被點選的按鈕新增一個active類，給點選的改變背景色　　　　2.點選按鈕其實就是把相應的div給顯示出來。　　　　需要注意的是，點選按鈕，給按鈕添加了一個類和把對應的div給顯示，需要把上一個點選的按鈕顏色還原

原生js實現tab選項卡切換功能

本文通過兩種原生js方法實現tab選項卡切換功能 <!DOCTYPE html> <html> <head> <title>tab選項卡</title> <meta charset="utf-8"> <s

選項卡切換後重新整理頁面停留在當前選項卡頁面

– HTML <div class="scroll_title" id="myTab1"> <span class="ord" id="mytab_01" onclick="nTabs('mytab_01');location.href='#mytab_01'"

移動端選項卡切換帶每一步的解析

**直接複製執行前提你的引進需要的東西 ** 請使用Swiper3.x **效果圖如下** ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20181114180811220.png) <!DOCTYPE html> <html&g

vue小練習——選項卡切換

相關推薦