Vue时间比较

Vue中v-if和v-else时间条件比较，渲染不同效果

1：首选通过data数据绑定将时间引用到template并渲染到HTML中，并将要设定的时间和需要通过时间比较以后需要发生条件渲染的字段先全部引入，首先确保在时间比较之前数据渲染没有问题

<el-table-column label="会员过等级名称" width="160">
            <template slot-scope="scope">
                {{ scope.row.OverTime }}
            </template>
 </el-table-column>
<el-table-column label="会员过期时间" width="160">
            <template slot-scope="scope">
                {{ scope.row.OverTime }}
            </template>
  </el-table-column>


           

2:在会员等级这一块做时间比较，会员到期日期大于当前日期渲染等级名称为红色，过期日期小于当前日期为灰色

注：此处通过渲染在template中的时间的数据格式是字符串，需要通过 Date parse（）将其数据格式转化为时间格式，再去和当前时间new Date（）进行直接比较

条件一：v-if="Date.parse(scope.row.OverTime) > new Date()"

条件一：v-else 如果有多个条件，可写成v-else(条件)

<el-table-column label="VIP等级" width="100">
            <template slot-scope="scope">
  				    <span v-if="Date.parse(scope.row.OverTime) > new Date()" style="color: red;font-weight:bold;font-size:15px ;">
  				    	{{ scope.row.RankName }}	
  				    </span>
  				     <span v-else style="color:#8391A5;font-weight:bold;font-size:15px ;">
  				    	{{ scope.row.RankName }}	
  				    </span>
            </template>
</el-table-column>
<el-table-column label="会员过期时间" width="160">
		            <template slot-scope="scope">
		                {{ scope.row.OverTime }}
		            </template>
 </el-table-column>