Vue.js 此vue组件如何绑定其样式 导出默认值{ 名称：“Swiper”， 道具：{ 间隔时间：{ 类型：数字， 默认值：3000 }, 持续时间：{ 类型：数字， 默认值：300 }, 移动比率：{ 类型：数字， 默认值：0.25 }, 显示指示器：{ 类型：布尔型， 默认值：true } }, 数据：函数（）{ 返回{ 幻灯片计数：0， 总宽度：0， swiperStyle:{}， 当前索引：1， 滚动：false， } }, 挂载：函数（）{ 设置超时（（）=>{ 这个。handleDom（）； 这个。startTimer（）； }, 3000) }, 方法：{ startTimer:函数（）{ this.playTimer=window.setInterval（（）=>{ 这个.currentIndex++； this.scrollContent（-this.currentIndex*this.totalWidth）； }，此。间隔） }, 停止计时器：函数（）{ window.clearInterval（this.playTimer）； }, 滚动内容：功能（当前位置）{ this.scrolling=true； this.swiperStyle.transition='transform'+this.animDuration+'ms'； 此.setTransform（当前位置）； 这是checkPosition（）； this.scrolling=false }, 检查位置：函数（）{ window.setTimeout（（）=>{ this.swiperStyle.transition='0ms'； 如果（this.currentIndex>=this.slideCount+1）{ 这个.currentIndex=1； this.setTransform（-this.currentIndex*this.totalWidth）； }else if（this.currentIndex 1）{ 设cloneFirst=slidesEls[0]。cloneNode（true）； 让cloneLast=slidesEls[this.slideCount-1].cloneNode（true）； swiperEl.insertBefore（cloneLast，slidesEls[0]）； swiperEl.appendChild（克隆优先）； this.totalWidth=swiperEl.offsetWidth； this.swiperStyle=swiperEl.style； } this.setTransform（-this.totalWidth）； }, touchStart：功能（e）{ 如果（此滚动）返回； 这个.stopTimer（）； this.startX=e.touchs[0].pageX； }, 触摸移动：功能（e）{ this.currentX=e.touchs[0].pageX； this.distance=this.currentX-this.startX； 让currentPosition=-this.currentIndex*this.totalWidth； 让moveDistance=此距离+当前位置； 此.setTransform（移动距离）； }, 触摸端：功能（e）{ 让currentMove=Math.abs（这个距离）； if（this.distance==0）{ 返回 }如果（this.distance>0&¤tMove>this.totalWidth*this.moveRatio）{//右边移动超过0.5 这是当前索引-- }如果（this.distancethis.totalWidth*this.moveRatio）{//向左移动超过0.5 这是当前索引++ } this.scrollContent（-this.currentIndex*this.totalWidth）； 这个。startTimer（）； }, 上一个：函数（）{ 本项目为变更项目（-1）； }, 下一步：函数（）{ 本条第（1）项； }, changeItem:函数（num）{ 这个.stopTimer（）； this.currentIndex+=num； this.scrollContent（-this.currentIndex*this.totalWidth）； 这个。startTimer（）； } } } //一些css代码

我正在处理swiper组件，我在互联网上获得了这些代码。 我不明白内联样式是如何绑定的，而所有的转换和转换都被赋予

data（）{}

中的

swiperStyle

，模板中没有

：

或

v-bind

。还有其他绑定样式的方法吗？我只是搞不清楚它是如何工作的 谢谢各位

<template>
    <div id="hy-swiper">
      <div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
        <slot></slot>
      </div>
      <slot name="indicator">
      </slot>
      <div class="indicator">
        <slot name="indicator" v-if="showIndicator && slideCount>1">
          <div v-for="(item, index) in slideCount" class="indi-item" :class="{active: index === currentIndex-1}" :key="index"></div>
        </slot>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Swiper",
    props: {
      interval: {
            type: Number,
        default: 3000
      },
      animDuration: {
            type: Number,
        default: 300
      },
      moveRatio: {
        type: Number,
        default: 0.25
      },
      showIndicator: {
        type: Boolean,
        default: true
      }
    },
    data: function () {
          return {
        slideCount: 0, 
        totalWidth: 0, 
        swiperStyle: {}, 
        currentIndex: 1,
        scrolling: false, 
      }
    },
    mounted: function () {
      setTimeout(() => {
        this.handleDom();
        this.startTimer();
      }, 3000)
    },
    methods: {
      startTimer: function () {
            this.playTimer = window.setInterval(() => {
              this.currentIndex++;
              this.scrollContent(-this.currentIndex * this.totalWidth);
        }, this.interval)
      },
      stopTimer: function () {
        window.clearInterval(this.playTimer);
      },

   
      scrollContent: function (currentPosition) {
        this.scrolling = true;
        this.swiperStyle.transition ='transform '+ this.animDuration + 'ms';
        this.setTransform(currentPosition);
        this.checkPosition();
        this.scrolling = false
      },

      checkPosition: function () {
        window.setTimeout(() => {
          this.swiperStyle.transition = '0ms';
          if (this.currentIndex >= this.slideCount + 1) {
            this.currentIndex = 1;
            this.setTransform(-this.currentIndex * this.totalWidth);
          } else if (this.currentIndex <= 0) {
            this.currentIndex = this.slideCount;
            this.setTransform(-this.currentIndex * this.totalWidth);
          }
          this.$emit('transitionEnd', this.currentIndex-1);
        }, this.animDuration)
      },

      setTransform: function (position) {
        this.swiperStyle.transform = `translate3d(${position}px, 0, 0)`;
        this.swiperStyle['-webkit-transform'] = `translate3d(${position}px), 0, 0`;
        this.swiperStyle['-ms-transform'] = `translate3d(${position}px), 0, 0`;
      },
          handleDom: function () {
        let swiperEl = document.querySelector('.swiper');
        let slidesEls = swiperEl.getElementsByClassName('slide');
        this.slideCount = slidesEls.length;
        if (this.slideCount > 1) {
          let cloneFirst = slidesEls[0].cloneNode(true);
          let cloneLast = slidesEls[this.slideCount - 1].cloneNode(true);
          swiperEl.insertBefore(cloneLast, slidesEls[0]);
          swiperEl.appendChild(cloneFirst);
          this.totalWidth = swiperEl.offsetWidth;
          this.swiperStyle = swiperEl.style;
        }
        this.setTransform(-this.totalWidth);
      },
      touchStart: function (e) {
        if (this.scrolling) return;
        this.stopTimer();
        this.startX = e.touches[0].pageX;
      },

      touchMove: function (e) {
        this.currentX = e.touches[0].pageX;
        this.distance = this.currentX - this.startX;
        let currentPosition = -this.currentIndex * this.totalWidth;
        let moveDistance = this.distance + currentPosition;
        this.setTransform(moveDistance);
      },

      touchEnd: function (e) {

        let currentMove = Math.abs(this.distance);
        if (this.distance === 0) {
          return
        } else if (this.distance > 0 && currentMove > this.totalWidth * this.moveRatio) { // 右边移动超过0.5
          this.currentIndex--
        } else if (this.distance < 0 && currentMove > this.totalWidth * this.moveRatio) { // 向左移动超过0.5
          this.currentIndex++
        }
        this.scrollContent(-this.currentIndex * this.totalWidth);
        this.startTimer();
      },
      previous: function () {
        this.changeItem(-1);
      },

      next: function () {
        this.changeItem(1);
      },

      changeItem: function (num) {
        this.stopTimer();
        this.currentIndex += num;
        this.scrollContent(-this.currentIndex * this.totalWidth);

        this.startTimer();
      }
    }
    }
</script>

<style scoped>
//some css code
</style>