javascript - Vuejs动态改变填充？

Question

我必须在这里滑动，我正在尝试控制 div 的 y 填充和 x 填充，但我被困在试图弄清楚我将如何去做这件事？

这是一个 CodePen。

所以基本上滑块分别切换 div 的 y 填充和 x 填充。不确定这是否可以绑定到类，还是会成为样式绑定问题。

<div id="app">
  <v-app id="inspire">
     <v-container>
        <v-layout row wrap justify-center>
           <v-flex xs12 text-xs-left>
               <div style='border:1px solid black' :class="setPadding">
Humpty Dumpty sat on a wall, humpty dumpty had a great fall.
               </div>
           </v-flex>   
          <v-flex xs12>
          <v-slider
           v-model="yPadding"
            :max="5"
            label="Padding Y"
            ticks="always"
            tick-size="2"
            thumb-label
          ></v-slider>
        </v-flex>
        <v-flex xs12>
          <v-slider
           v-model="xPadding"
            :max="5"
            label="Padding X"
            ticks="always"
            tick-size="2"
            thumb-label
            ></v-slider>
           </v-flex>
         </v-layout> 
      </v-container>
     </v-app>
   </div>

      new Vue({
        el: '#app',
          data() {
               return {
                yPaddingSize: '0',
                ypaddingDirection: 'y',
                xPaddingSize: '0',
                xpaddingDirection: 'x'
            }
           },
        computed: {
       setYPadding() {
      return `$p{this.yPaddingDirection} - ${this.yPadding}px`
        },
      setXPadding() {
      return `$p{this.xPaddingDirection}-${this.xPadding}px`
       },
     setPadding() {
     return this.setYPadding
     return this.setXPadding
      }
    }
  })

标签： javascriptvuejs2vuetify.js

Answer 1

这是一个示例程序，重点是:style.

---

const app = new Vue({
  el: '#app',
  data: {
    dx: 0,
    dy: 0
  },
  computed: {
    style() {
      return {
        padding: `${this.dx}px ${this.dy}px`,
        border: '1px solid black' //can also place in css
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <article :style=style>
    {{dx}}/{{dy}}
  </article>
  <input type=range min=1 max=100 value=50 v-model=dx>
  <input type=range min=1 max=100 value=50 v-model=dy>
</div>