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

最新推荐文章于 2023-01-11 11:47:35 发布

原创最新推荐文章于 2023-01-11 11:47:35 发布 · 置顶 · 7.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#clas #vue #动态改变class和style

vue 专栏收录该内容

15 篇文章

订阅专栏

博客主要围绕Vue展开，介绍了在Vue中动态改变class和style的方法，同时还提及了背景图高度比较大时的处理方式，这些内容都与前端开发密切相关。

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;