Question

我有一个如下所示的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
        }
    }
}

Answer 1

即使计数器被单击，我也想停止计数。

只需在继续操作之前添加条件检查即可。添加此行： 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>

Answer 2

我认为您有很多方法可以实现其中之一

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

Answer 3

您应该避免在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>

Answer 4

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

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

如何使用v-on阻止负值：单击Vuejs

4 个答案: