Vue.js 实现v-if和v-else来切换CSS样式

一、要想使用Vue.js实现v-if和v-else来切换CSS样式，有两种实现方式：

比如我们想给一个div设置两个不同的背景颜色（当status为1的时候，我们设置背景为红色，当status状态为2的时候我们设置背景为蓝色）：

.back-red{		/* 红色背景 */
	width: 100px;
	height: 100px;
	background-color: red;
}
.back-blue{		/* 蓝色背景 */
	width: 100px;
	height: 100px;
	background-color: blue;
}

1、第一种可以使用 v-if 和 v-else来写两条div元素，然后在两个元素上分别设置一个不同的class来实现不同的样式：

<div v-if=" status == '1' " :class="back-red"></div>
<div v-if=" status == '2' " :class="back-blue"></div>

2、第二种使用三元表达式结合:class直接在一个div上判断并切换class：（如果状态有多个也可以再后面使用三元表达式嵌套）

<div :class="status == '1'? 'back-red' : 'back-blue'"></div>

上面两种方式各有各的好处，看自己的习惯选择。

二、写一个简单的demo记录一下：

1、先简单的说明一下，页面中展示几条信息，然后这里面有一个处理状态，当处理状态为3（待派单）的时候，就显示修改预约按钮，如果处理状态为4（已派单）则不显示修改预约按钮。

2、我们是使用一个大的div将三个按钮包裹住，然后通过calc()函数来设置一个margin-left，使三个按钮来靠右：
当有三个按钮的时候可以使用：设置左外边距为：calc(用100% - 三个按钮的宽度 - 按钮中间的距离)

.but_big_div{			/* 包裹按钮div的 大的div */
	padding-right: 0px;
	margin-left: calc(100% - 248px);
}

当显示两个按钮的时候使用：设置左外边距为：calc(用100% - 两个按钮的宽度 - 按钮中间的距离)

.but_big_div-s{			/* 包裹按钮div的 大的div */
	padding-right: 0px;
	margin-left: calc(100% - 168px);
}

我们这里通过三元表达式的方式来实现，首先通过v-for循环获取数据并进行判断该条记录中status的状态，如果status为待派单，那么我们将class绑定为but_big_div，如果已派单则直接绑定为but_big_div-s；

下面是通过v-if来判断，如果status为待派单，则正常显示该按钮，如果status不是待派单，则将按钮隐藏；

<div class="row" v-for="(site,index) in sites" :class="index == sites.length-1 ? 'row_bottom_s' : 'row_bottom'">
	<div class="col-xs-12 col-md-12">
		<div class="col-xs-12 col-md-12 txt_div">
			<p>联系人：{{site.measurename}}</p>
			<p>手机号码：{{site.measurephone}}</p>
			<p>安装地址：{{site.measureaddress}}</p>
			<p>上门时间：{{site.measuretime}}</p>
			<p>处理状态：{{site.status}}</p>
		</div>
		<div :class="site.status=='待派单'?'but_big_div' : 'but_big_div-s'">
			<div class="but_div">
				<img alt="图片加载失败" src="路径" class="but_img" @click="updateAppoint(site)" v-if="site.status=='待派单'"/>
			</div>
			<div class="but_div">
				<img alt="图片加载失败" src="路径" class="but_img" @click="showProgress(site)"/>
			</div>
			<div class="but_div">
				<img alt="图片加载失败" src="路径" class="but_img" @click="showDetail(site)" />
			</div>
		</div>
	</div>
</div>

你要去做一个大人，不要回头，不要难过。

“你只是对我不甚在意。”