vue中 根据变量 来设置不同的class和style及css背景图过大的问题

1.改变class

// 判断isreply是否为false, 若为false, 则拥有m-light-reply的class名
<div :class="{'m-light-reply': !isreply}">
</div>

// 判断lang=='en' 是否为false, 若为false, 则拥有text-p的class名
 <p v-bind:class="[lang=='en' ? 'text-pen' : 'text-p']"></p>
 i18国际化需要 watch监听lang值变化
 watch: {
    lang: function(oal, newol) {
      this.lang = oal;
    }
  },

2.改变style

// 定义fontSize变量然后动态赋值；或者判断isNike是否为true, 对css属性进行三目判断
<div :style="{'font-size': fontSize + 'px', 'margin-bottom' : isNike ? '0' : '20px'}">
</div>

3.背景图高度比较大的处理方式

// 在一般的业务中,我们经常遇到背景图比较大,需要裁剪的问题! 处理方式
           width: 100%;
            //height: 1334px;  //此时背景图的高度为1334px,但是父盒子的高度低于该值,超出父盒子100%高度会被隐藏!
            height: 100%;
            background-image: url('./img/bg.png');
            overflow: hidden;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover !important;