vue 控制显示隐藏的两种办法

方法一:v-if

<div class="operate-w" v-if="CanAddTip">
      截至日期已过,不能添加套餐
</div>
data: {
CanAddTip:false;
}
//方法里:
goSet: function (e) {
    this.CanAddTip=true;
    //this.CanAddTip=!this.CanAddTip; 或者直接取反
},

其他:v-if=“item.payState0?true:false"
v-if="carMealCount
0”

方法二: v-bind:class

<div class="operate-w" v-bind:class="{' MDshow':showPopu}">
      截至日期已过,不能添加套餐
</div>
<style>
 .MDshow{dispalay:block}
</style>
data: {
showPopu:false;
}
//方法里:
goSet: function (e) {
    this.showPopu=true;
},

其他:v-bind:class="{’ active’:carMealCount==0}"
currentState方法里赋值 用于选中效果,下个讲

你可能感兴趣的:(vue,vue,js)