Question

我正在尝试为数组中的每个层制作一个反应性％到px计算器。（不是实际％，而是0-1之间的值）

px值由% * output.width

计算

目前，当更改％值时，它会计算px值。我试图使px值成为输入而不是跨度，所以当它被改变时，它将计算％值。

所以请将此更改为<span>{{layer.settings.x * output.width}}px</span>，如下所示：<input type="number" v-model="layer.settings.x * output.width">

％应始终为'主值'，因此如果更改output.width，则应该影响px值，％值应保持原样。

new Vue({
  el: '#app',
  data: {
    output: {
        width: 1920,
        height: 1080
      },
    layers: [{
      settings: {
        x: 1,
        y: 0.2
      }
    },
    {
      settings: {
        x: 0.5,
        y: 0.8
      }
    },
    {
      settings: {
        x: 0.25,
        y: 1,
      }
    }]
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>


<div id="app">

  <span>Output Resolution: </span>
  <input type="number" v-model="output.width">
  <span>x</span>
  <input type="number" v-model="output.height">

  <hr/>

  <div v-for="layer in layers" style="margin-bottom: 20px;">
  
    <span>Width</span>
    <input type="number" v-model="layer.settings.x">
    <span>{{layer.settings.x * output.width}}px</span>
    
    <br/>
    <span>Height</span>
    <input type="number" v-model="layer.settings.y">
    <span>{{layer.settings.y * output.height}}px</span>
  </div>
  
</div>

Answer 1

Myabe你正在以错误的方式使用图层阵列。尝试这样的事情：

<span>{{layers[0].settings.x * output.width}}px</span>
<span>{{layers[0].settings.y * output.height}}px</span>

Vue.js被动输入转换

1 个答案: