如何使用 v-on 阻止负值：点击 Vuejs答案

【问题标题】：How to block minus value using v-on:click at Vuejs如何使用 v-on 阻止负值：点击 Vuejs
【发布时间】：2019-09-24 09:48:13
【问题描述】：

我有一个像下面这样的 vue 组件。
但是我想在计数器为 0 时停止，即使它被点击了。
在这种情况下如何使用该方法？
唯一的方法是我必须采取一些方法来阻止它？非常感谢您的阅读。

<button v-on:click="counter.document -= 1">-</button>
    <h3>{{counter.document}}</h3>
<button v-on:click="counter.document += 1">+</button>

data() {
    return {
        counter: {
            document:0
        }
    }
}

【问题讨论】：

请在学习 js 之前不要跳过框架。只是一个建议。

标签： javascript vue.js

【解决方案1】：

我想在计数器为 0 时停止，即使它被点击了。

在继续之前添加条件检查。添加这一行： if (this.count === 0) return。下面是一个工作演示：

new Vue({
  el: "#app",
  data: {
    count: 0
  },
  methods: {
    increment () {
      this.count += 1
    },
    decrement () {
      if (this.count === 0) return
      this.count -= 1
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>{{ count }}</h2>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>

【讨论】：

【解决方案2】：

有很多方法可以做到这一点。当值变得小于或等于 0 时，您可以在否定按钮中使用 disabled 属性。请参阅以下代码。

<button
  v-on:click="counter.document -= 1"
  :disabled="counter.document <= 0"
>

【讨论】：

【解决方案3】：

我认为你有很多方法可以实现其中之一就是这个

<button v-on:click=" if(counter.document>0){counter.document -= 1}">-</button>

【讨论】：

【解决方案4】：

应避免在Template 中进行复杂操作，而应使用methods 属性

new Vue({
  el: "#app",
  data(){
  	return {
    	value: 0
    }
  },
  methods: {
  	subtract() {
    	if(this.value) {
      	this.value -= 1
      }
    }
  }
})

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <p> {{ value  }}</p>
  <button @click="value+=1">Add 1</button>
  <button @click="subtract" :disabled="!value ? 'true': undefined">Subtract 1</button>
</div>

【讨论】：