Vue动态绑定样式

丁凯

2020.10.16

25人浏览

Vue动态绑定样式

以background-image为例:

    首先引入路径:

import bgImg1 from "../../public/image/beijing (1).png";

import bgImg2 from "../../public/image/beijing (2).png";

import bgImg3 from "../../public/image/beijing (3).png";

   然后写需要设置样式的元素:

  <div class="rank"  v-bind:style="bgImg>

  在数据模型中书写样式以及图片路径的数组集合,

  重点不要忘记url路径需要""或者'':

data() {

    //这里存放数据

    return {

      bgImg: {

        backgroundImage: "url('" + bgImg1 + "')",

        backgroundRepeat: "no-repeat",

        backgroundPosition: "center center",

        backgroundSize: "cover"

      },

      imgUrl: [bgImg1, bgImg2, bgImg3],

    };

  },

  最后在钩子函数mounted()中写一个简单的计时器进行循环

//生命周期 - 挂载完成(可以访问DOM元素)

  mounted() {

    let x = 1;

    setInterval(() => {

      x++;

      this.bgImg.backgroundImage = "url('" + this.imgUrl[x - 1+ "')";

      if (x == 4) {

        x = 0;

      }

    }, 3000);

  },

这样写就可以对样式进行动态绑定了,但是还是会有一些小问题:

在图片切换时会进行加载,这个加载是需要时间的,然后它就会闪一下白,

如何解决,敬请期待!

丁凯    351 河北省承德市围场满族蒙古族自治县 设计师杨冰是女孩 1995.01.10
京ICP备17020986号-1
筑坐极2020版