Hello，我們做專案的時候經常會遇到一些支付流程啊，配送流程啊。說白的就是一個’時間表’，雖然我這麼說是‘時間表’，可能在術語上不對，我也不知道怎麼解釋了。
請看下圖：我們要實現的效果圖：

一看圖，相信大家都明白了，專案中會遇到很多這種互動。
邏輯思路分析：
1.背景條跟隨狀態變化而變化。
2.文字內的背景色跟顏色跟隨狀態變化而變化

那麼應該怎麼去考慮寫程式碼呢？ 首先我說過了我們是通過一個狀態碼來判斷 我們的背景條到那裡，還有我們數字內的背景色跟字型顏色。那麼 我們可以反過來想想 後臺是不是 傳一個 值 等於 多少 我們寫一個假如值：
num：1 填寫資訊狀態
num：2 確認資訊狀態
num：3 支付狀態
num：4 完成狀態

因為我們沒有後臺，我們就寫四個bntton 按鈕 來模擬這四個值 的變化把！

<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
        list-style: none;

    }
    #box{
        width: 1200px;
        height: 60px;
        border: 1px solid red;
        margin
 
: 50px auto;
        padding: 20px  30px;
        position: relative;
        /*overflow: hidden;*/
    }
    li{
        float: left;
        padding: 0 105px;
        z-index: 99;
        width: 90px;
    }
    li>div{
        width: 40px;
        height: 40px;
        border-radius: 100%;
        background
 
: #999;
        text-align: center;
        line-height: 40px;
        margin: 0 auto;
        transition: all 1s;
    }
    p{
        text-align: center;
    }
    #bg{
        position: absolute;
        width: 95.24%;
        background: #999;
        height: 20px;
        z-index: -1;
        top: 30px;
    }
    .bgs{
        height: 100%;
        background: red;
        transition: all 0.5s;
    }
    #btn{
        position: absolute;
        bottom: -30px;
    }
    .active{
        background: blue;
        color: #fff;
    }
</style>
<div id="box">
    <ul>
        <li ref='list'>
            <div :class="{active:state.active1}">1</div>
            <p>填寫資訊</p>
        </li>
        <li>
            <div :class="{active:state.active2}">2</div>
            <p>確認資訊</p>
        </li>
        <li>
            <div :class="{active:state.active3}">3</div>
            <p>支付</p>
        </li>
        <li>
            <div :class="{active:state.active4}">4</div>
            <p>完成</p>
        </li>
    </ul>
    <div id="bg">
        <div class="bgs" :style='activeObj'></div>
    </div>

    <div id='btn'>
        <button @click='add1'>填寫資訊</button>
        <button @click='add2'>確認資訊</button>
        <button @click='add3'>支付</button>
        <button @click='add4'>完成</button>
    </div>
</div>

佈局就不多說了直接看頁面裡面的幾個屬性：
1.首先 我給這四個li綁定了 同一個類 就是 active的類，選中的樣式，然後通過vue讓他們都為fasle；
2.其次 給背景條綁定了一個style 是一個物件，裡面是背景條的寬 width
3.最後我給每一個按鈕新增不同的點選事件
分析我們的JS程式碼：

<script type="text/javascript">
    var vm = new Vue({
        el:'#box',
        data:{
            activeObj:{
                width:0
            },
            state:{
                active1:false,
                active2:false,
                active3:false,
                active4:false,
                num:'',
                listWidth:''
            }

        },
        methods:{
            add1(){
                this.state.num = 1;
                // console.log(this.$refs.list.getBoundingClientRect().width)
                // console.log(this.state.active1)
            },
            add2(){
                this.state.num = 2
            },
            add3(){
                this.state.num = 3
            },
            add4(){
                this.state.num = 4
            }
        },
        watch:{
            state:{
                handler(newVale){
                    if (newVale.num == 1) {
                        this.activeObj.width = this.state.listWidth +'px';
                        this.state.active1 = true;
                        this.state.active2 = false;
                        this.state.active3 = false;
                        this.state.active4 = false;
                    }else if (newVale.num == 2 ) {
                        this.activeObj.width = this.state.listWidth * 2 +'px'
                        this.state.active1 = true;
                        this.state.active2 = true;
                        this.state.active3 = false
                        this.state.active4 = false
                    }else if( newVale.num == 3){
                        this.activeObj.width = this.state.listWidth * 3 +'px'
                        this.state.active1 = true;
                        this.state.active2 = true;
                        this.state.active3 = true
                        this.state.active4 = false
                    }else if(newVale.num == 4){
                        this.activeObj.width = this.state.listWidth * 4 +'px'
                        this.state.active1 = true;
                        this.state.active2 = true;
                        this.state.active3 = true
                        this.state.active4 = true
                    }
                },deep: true
            }
        },
        mounted(){
            this.state.listWidth =  this.$refs.list.getBoundingClientRect().width
            console.log(this.state.active1)
        }
    })
</script>

通過我們一開始的邏輯，我們說過要通過一個num值的返回的狀態來改變我們想改變的樣式！
所以我們就通過自定義 一個num值，然後點選按鈕的時候改變 num值的變化。然後我們通過vue中的監聽num值來改變樣式！（注意一點：這裡因為是物件型別所以監聽要加 deep：true）。

我們要說一下，ref=‘list’ 大家可以上網查一下，在mounted裡面的程式碼是 獲取li元素的寬度的。

最後，我寫的可能比較多，不夠簡單，因為能想到的都想到了，如果大家有更好的程式碼，跟思路可以給我在下方留言或者新增我好友 QQ992262716.

好了！我是楊小寶，感謝您的閱讀！（持續更新飛機票專案所有知識點）