支付，配送....流程，模拟后台返回状态码 --飞机票项目

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.

好了！我是杨小宝，感谢您的阅读！（持续更新飞机票项目所有知识点）