制作影院订票系统页面

利用HTML、CSS、JavaScript，Bootstrap页面布局，Vue.js的数据绑定、事件触发响应，Vue.js的组件化来进行操作。

页面分为左右两部分，利用bootstrap栅格布局实现。

    <div class="container" id="app">
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <!--左上半部分-->
                </div>
                <div class="row">
                    <!--左下半部分-->
                </div>
            </div>
            <div  class="col-md-6 sceenRight">
                <div class="row">
                        <!--右上半部分-->
                    </div>
                </div>
                <div class="row">
                    <!--右下半部分 -->
                </div>
            </div>
        </div>
    </div>

座位数据

seatflag:[
                    0,0,0,0,0,0,0,0,0,0,
                    0,0,0,0,0,0,0,0,0,0,
                    0,0,0,0,0,0,0,0,0,0,
                    0,0,0,0,0,0,0,0,0,0,
                    0,0,0,0,0,0,0,0,0,0,
                    0,0,0,0,0,2,0,0,0,0,
                    0,0,0,0,0,0,0,0,0,0,
                    0,0,0,0,0,2,2,0,0,0,
                    0,0,0,2,2,0,2,2,0,0,
                    -1,0,0,0,0,0,0,0,0,-1,
                    -1,-1,0,0,0,0,0,0,-1,-1,
                ]

使用Vue中的v-for命令对上面的数据动态生成多个座位的<li>元素。

　　　　　　　　　　　　　　<li class="seat" v-for="(item,index) in seatflag" 
                            :key="index" :class="{'seatNo':seatflag[index]==-1,
                            'seatActive':seatflag[index]==1,
                            'seatSpace':seatflag[index]==0,
                            'seatNouse':seatflag[index]==2}"
                             @click="handleClick(index)">
　　　　　　　　　　　　　　</li>

座位的事件处理

　　　　　　　　handleClick:function(index){
                    if(vm.seatflag[index]==1){
                        vm.$set(vm.seatflag,index,0);
                        this.curSeat.splice(this.curSeat.findIndex(item=>item===index),1);
                    }else
                        if(vm.seatflag[index]==0 && this.count<5){
                            vm.$set(vm.seatflag,index,1);
                            this.curSeat.push(index);
                        }
                    this.curSeatDisp=[];
                    for(let item of this.curSeat){
                        this.curSeatDisp.push((Math.floor(item / this.seatCol)+1)+"行"+(item % this.seatCol +1)+"列");
                    }
                    var mySeat = vm.seatflag.filter(item=>{
                        return item==1;
                    })
                    this.count=mySeat.length;
                    if(this.count>=5)this.maxFlag=true;
                    else this.maxFlag=false;
                }

全局过滤器，让其保留两位数点，并且在金额前面加上人民币符号

Vue.filter('numberFormat',function(value){
            
            return '￥'+value.toFixed(2)
        })

HTML中使用过滤器是通过管道符实现的

<p>单价：<strong>{{filmInfo.unitPrice | numberFormat}}</strong></p>
                    <p>总价：<strong style="color:red;">{{totalPrice | numberFormat}}</strong></p>

电影信息展示，通过调用Vue实例的自定义对象中的相关信息来显示信息。

这里使用数据绑定使用了两种方法，一种是大括号的数据绑定方式   {{数据}} ；另一种是属性绑定方式   例如     “ :src="filmInfo.filmImg" ”。