Vuejs2 如何将最小值和最大值添加到Vue计数值

用户可以单击

+

和

-

按钮来增减该值。如何为

[[count]]

添加最小值和最大值，例如最小值=1和最大值=10

我的

Vue.js

应用程序：

<div id="app">
    <a class="btn" v-on:click="increment">Add 1</a>
    <a class="btn" v-on:click="decrement">Remove 1</a>

    <span>[[ count ]]</span>
  </div>

  <script>

    const App = new Vue({
      el: '#app',
      delimiters: ['[[',']]'],
      data() {
        return {
          min: 1,
          max: 10,
          count: 1
        }
      },
      methods: {
        increment() {
          this.count = this.count === this.max ? this.max : this.count + 1;
        },
        decrement() {
          this.count = this.count === this.min ? this.min : this.count + 1;
        }
      }
    })

  </script>

并通过min和plus按钮调整输入值：

<script>
    const app = new Vue({
      el: '#app',
      delimiters: ['[[',']]'],
      data() {
        return {
          quantity: 1,
          max: {{ product.calculatedMaxPurchase }},
          min: {{ product.minPurchase }}
        }
      },
      methods: {
        increment() {
          //this.count++
          this.quantity = this.quantity === this.max ? this.max : this.quantity + 1;
        },
        decrement() {
          //this.count--
          this.quantity = this.quantity === this.min ? this.min : this.quantity - 1;
        }
      }
    })
  </script>

const app=新的Vue({
el:“#应用程序”，
分隔符：['['，']]']，
数据（）{
返回{
数量：1，
最大值：{product.calculatedMaxPurchase}，
min:{{product.minPurchase}
}
},
方法：{
增量（）{
//这个，伯爵++
this.quantity=this.quantity===this.max？this.max:this.quantity+1；
},
减量{
//这个，伯爵--
this.quantity=this.quantity===this.min？this.min:this.quantity-1；
}
}
})

例如

{{product.minPurchase}

是

twig

变量，其中包含来自ShopWare后端的设置

---

这是干净的方式吗？当计数达到1时，如何添加CSS类，以便禁用按钮？

检查

计数在
递增
和
递减
期间是否已处于限制，并相应地采取行动

increment（）{
this.count=this.count==10？10:this.count+1；
}

减量（）{
this.count=this.count==1？1:this.count-1；
}

如果需要，您还可以创建
min
和
max
数据属性，而不是硬编码
1
和
10

编辑后：
如果使用数字输入，则无需使用方法即可解决此问题。只需将数据绑定到输入，如下所示：



请参见下面的演示：


newvue({
el:“应用程序”，
数据（）{
返回{
民:1,，
最高：10，
计数：1
}
}
});

鼠标悬停在要更改的输入上
计数：{{Count}
谢谢。我更新了我的问题。如果我想将我的
[[count]]
更改为由此按钮控制的
，没问题。我编辑以回答您的新问题我需要按钮（与输入字段结合使用）。见我更新的第2个问题。感谢您知道如何将数据属性绑定到模板、使用按钮和使用数字输入。你可以结合这些知识来做你需要的事情。切勿在组件JavaScript或属性内部使用
{{}
：仅在标记之间使用。这是一个与你原来的问题完全不同的问题，它使用了我从你的第一个（和第二个更新的）问题中得到的答案。现在最好是提出一个新问题，而不是第三次对这个问题进行重大修改，引入几个新元素。这些是细枝变量。在后端，有指定的设置，在细枝模板中，这些设置用
{{{product.minPurchase}}
呈现。这就是为什么我在Vue实例中使用分隔符：
['['[']，']]']
<script>
    const app = new Vue({
      el: '#app',
      delimiters: ['[[',']]'],
      data() {
        return {
          quantity: 1,
          max: {{ product.calculatedMaxPurchase }},
          min: {{ product.minPurchase }}
        }
      },
      methods: {
        increment() {
          //this.count++
          this.quantity = this.quantity === this.max ? this.max : this.quantity + 1;
        },
        decrement() {
          //this.count--
          this.quantity = this.quantity === this.min ? this.min : this.quantity - 1;
        }
      }
    })
  </script>