javascript - Vue.js--更改 div 元素的大小，el.style.attr 不起作用

Question

我试图在 Vue 中制作像图像中那样的东西，但在更改 div 元素大小时遇到​​麻烦。

圈子组:

Vue 警告:

Error in mounted hook: "TypeError: Cannot read property 'style' of undefined

还尝试了 el.setAttribute("style", "top: px; Bottom: px;...")，setAttribute() 方法出现错误.

<template>
  <div class="wavyCircles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</template>

computed: {
    circleSizing() {
      let circles = document.getElementsByClassName("circle")
      for (let i = 0; i <= circles.length; i++) {
        circles[i].style.top = 10 * (i + 1)
        circles[i].style.bottom = 10 * (i + 1)
        circles[i].style.left = 10 * (i + 1)
        circles[i].style.left = 10 * (i + 1)
      }
    }
  },

  mounted: function() {
    this.circleSizing();
  }

Answer 1

您应该使用一种方法而不是计算属性，并且您正在循环一个额外的循环，结果您得到 circles[i] is undefined

Vue.config.devtools = false
Vue.config.productionTip = false

new Vue({
  el: "#app",
  methods: {
    circleSizing() {
      let circles = document.getElementsByClassName("circle")
      for (let i = 0; i <= circles.length - 1 ; i++) {
        circles[i].style.top = 10 * (i + 1) + "px"
        circles[i].style.bottom = 10 * (i + 1) + "px"
        circles[i].style.left = 10 * (i + 1) + "px"
        circles[i].style.left = 10 * (i + 1) + "px"
      }
    }
  },
  mounted() {
      this.circleSizing()
  }
})

.wavyCircles {
  position: relative;
}

.circle {
  position: absolute
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="wavyCircles">
    <div class="circle">u</div>
    <div class="circle">s</div>
    <div class="circle">e</div>
    <div class="circle">m</div>
    <div class="circle">e</div>
    <div class="circle">t</div>
    <div class="circle">h</div>
    <div class="circle">o</div>
    <div class="circle">d</div>
    <div class="circle">i</div>
    <div class="circle">n</div>
    <div class="circle">s</div>
    <div class="circle">t</div>
    <div class="circle">e</div>
    <div class="circle">a</div>
    <div class="circle">d</div>
  </div>
</div>