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
      }
    }
  })

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>