Question

我必须在这里滑动滑块，并且试图控制div的y填充和x填充，但是我一直试图弄清楚如何进行此操作？

Here是一个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

这是一个示例程序，关键点是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>

import React, { Component } from 'react';
import { Ionicons } from '@expo/vector-icons';

export default class IconExample extends Component {
  render() {
    return <Ionicons name="md-checkmark-circle" size={32} color="green" />;
  }
}

Vuejs是否动态更改填充？

1 个答案: