Vue.js 实现v-if和v-else来切换CSS样式【开发记录】

一、要想使用Vue.js实现v-ifv-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-ifv-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(已派单)则不显示修改预约按钮。
Vue.js 实现v-if和v-else来切换CSS样式【开发记录】_第1张图片
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>

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

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

你可能感兴趣的:(Vue.js)