#app ul{ 
        
		list-style: none;/*去除列表样式*/
		width: 550px;/*设定宽度,目的是一行显示多少座位,其他座位另起新行*/
  }

  用户单击某个座位后，会执行相应座位的单击事件处理函数handleClick(index)，处理函数的入口参数index是用户单击某个座位在一维数组seatflag中的位置值，利用Vue中的数据绑定，当用户修改了数组seatflag的数据值，会自动刷新相对应的座位图片。该函数的实现方式如下所示：

handleClick:function(index){ 
        
					if (vm.seatflag[index]==1){ 
        
						vm.$set(vm.seatflag,index,0);
						//console.log(this.curSeat.findIndex(item=>item.id===index));
						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=>{ 
        //item为数组当前的元素
						return item==1;
					})
					this.count=mySeat.length;
					//判断达到购买上限，设置数据maxFlag，并显示提示语句，并显示提示语句“您一次最多仅能买五张票”
					if (this.count>=5)this.maxFlag=true;
					else this.maxFlag=false;
				}

  说明如下：

  (1)显示已选座位“几排几列”是根据 curSeatDisp 数组确定，在HTML中通过v-for指令实现，其代码如下所示：

 <p id="seatSelect">
    座位:
    <span v-for="(item,index) in curSeatDisp" :key="index">
    {
    
       {item}}
    span>
 p>

  (2)显示已选择多少个座位是根据count数据确定，在HTML中的实现代码如下所示：

<p>已选择
      <strong style="color: red;">{
    
       {count}}strong>个座位，
 p>

  (3)判断达到购买票数上限后，是否显示“您一次最多仅能买五张票”的提示语句，通过数据maxFlag的值确定。在HTML中的语句如下所示：

<strong style="color: red;">再次单击座位可取消。
		<span v-if="maxFlag">您一次最多只能买五张票！span>
strong>

  在Vue中通过监听count数据的变化，可以重新计算总价。在Vue实例中的语句如下所示：

computed:{ 
        
		totalPrice:function(){ 
        
		return this.count * this.filmInfo.unitPrice;
	}
},

  显示电影票单价和总价通过Vue的全局过滤器实现，让其保留两位小数点，并在金额前面加上人民币符号。在Vue实例中的语句如下所示：

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>

  图1的右上半部分是电影海报和电影的部分相关信息，这部分是通过调用Vue实例的filmInfo对象中的相关数据来显示信息。flmInfo对象在Vue的data中的定义如下：

fileInfo:{ 
        
			name:'长津湖',
			nameEnglish:'The Battle at Lake Changjin',
			copyRight:'中文2D',
			filmImg:'img/1.png',
			storyType:'历史、战争',
			place:'中国大陆',
			timeLength:'176 分钟',
			timeShow:'2021年9月30日',
			cinema:'万达影城',
			room:'1号影厅',
			time:'2021年9月30日 20：00',
			unitPrice:38,
				}

  此处HTML的实现方式是使用Bootstrap提供的媒体对象组件，代码如下所示：

注：可在bootstrap官网直接映入媒体对象组件。操作方式：打开bootstrap官网（https://www.bootcss.com/），点击页面最中心Bootstrap3中文文档(v3.4.1),选择右侧列表中的“媒体对象”，复制代码即可。

<div class="row">
		            <!--右上半部分：电影信息行-->
					<div class="media">
					  <div class="media-left">
					    <a href="#">
					      <img class="media-object" :src="filmInfo.filmImg" alt="..."  height="200px">
					    </a>
					  </div>
					  <div class="media-body">
					    <h4 class="media-heading">中文名:<strong>{ 
        { 
        filmInfo.name}}</strong></h4>
						<h4 class="media-heading">英文名:<strong>{ 
        { 
        filmInfo.nameEnglish}}</strong></h4>
						<p>剧情:{ 
        { 
        filmInfo.storyType}}</p>
						<p>版本:{ 
        { 
        filmInfo.copyType}}</p>
						<p>{ 
        { 
        filmInfo.place}}/{ 
        { 
        filmInfo.timeLength}}</p>
						<p>{ 
        { 
        filmInfo.timeShow}}</p>
					  </div>
					</div>
		        </div>

  这里在HTML中进行数据绑定时使用了两种方式，一种是双大括号的数据绑定方式，即“{ {数据}}”；另一种是属性绑定方式，
即“：src='filmInfo.film Img”。

  总结：本章主要讲解了影院订票系统前端页面的综合案例，重点是使用Vue. js的特性结合Bootstrap的排版功能实现，该案例要求具有较高的 JavaScript 程序的编程能力和对Vue. js进行网页行为的控制能力。通过这个案例的学习，读者不仅可以更进一步、更深刻地理解前面章节学过的所有知识，而且能够体会到最新前端框架Vue. js的数据渲染、事件触发响应、监听属性、计算属性、各种指令等在实际项目中的灵活应用，以及Bootstrap的简便布局排版能力。