vue中this.$el 和 this.$ref

最新推荐文章于 2024-07-31 10:10:55 发布

zhanglongdream

最新推荐文章于 2024-07-31 10:10:55 发布

阅读量5.1w

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/zhanglongdream/article/details/75408631

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

+    <ul class="pd-select-wheel" ref="wheel">
 +      <li class="pd-select-wheel-item" :class="{'hidden':setHidden(el.index)}" :style="setWheelItemDeg(el.index)" :index="el.index" v-for="el,index in renderData " :key="index">{{el.value}}</li>
 +    </ul>

vue中也是允许进行dome操作的（但是不建议）

这里我就说说 this.$el和this.$ref的区别

this.$el是在mounted中才会出现的，在created的时候是没有的所以我们引用的时候

 mounted () {
 +      /* 事件绑定 */
 +      this.$el.addEventListener('touchstart', this.itemTouchStart)
 +      this.$el.addEventListener('touchmove', this.itemTouchMove)
 +      this.$el.addEventListener('touchend', this.itemTouchEnd)

它指的是当前组件的的元素

this.$ref

点击打开链接

+    <ul class="pd-select-wheel" ref="wheel">
 +      <li class="pd-select-wheel-item" :class="{'hidden':setHidden(el.index)}" :style="setWheelItemDeg(el.index)" :index="el.index" v-for="el,index in renderData " :key="index">{{el.value}}</li>
 +    </ul>

+      setWheelDeg (updateDeg, type, time = 1000) {
 +        if (type === 'end') {
 +          this.$refs.wheel.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`
 +          this.$refs.wheel.style.webkitTransform = `rotate3d(1, 0, 0, ${updateDeg}deg)`
 +        } else {
 +          this.$refs.wheel.style.webkitTransition = ''
 +          this.$refs.wheel.style.webkitTransform = `rotate3d(1, 0, 0, ${updateDeg}deg)`
 +        }
 +      },