這個想法是當減號按鈕被點擊到 0 時，我需要隱藏減號按鈕，然后取消隱藏加號按鈕以再次添加值。我在這里嘗試過的我設法使減號和加號功能。任何人都可以幫助我還是 vuejs 的新手。
<template>
<div class="message"># {{ count }}<br>
<p># {{ count }}</p>
<button v-on:click.prevent="increment"> </button>
<button v-on:click.prevent="decrement">-</button>
</div>
</template>
<script>
export default {
data: ()=> {
return {
count: 5
}
},
methods: {
increment() {
this.count ;
},
decrement() {
if(this.count > 0) {
this.count-- ;
}
}
}
}
</script>
uj5u.com熱心網友回復：
-當值為 0 時，您可以這樣做以隱藏：
<button v-if="count > 0" v-on:click.prevent="decrement">-</button>
uj5u.com熱心網友回復：
您可以使用v-show基于count值的指令：
new Vue({
el: '#app',
data: () => {
return {
count: 5
}
},
methods: {
increment() {
this.count ;
},
decrement() {
if (this.count > 0) {
this.count--;
}
}
}
})<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
<div class="message">
<p># {{ count }}</p>
<button v-show="count >= 0" v-on:click.prevent="increment"> </button>
<button v-show="count > 0" v-on:click.prevent="decrement">-</button>
</div>
</div>uj5u.com熱心網友回復：
嘗試使用 v-if
new Vue({
el: '#demo',
data: ()=> {
return {
count: 5
}
},
methods: {
increment () {
this.count ;
},
decrement () {
if(this.count > 0){
this.count-- ;
}
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="message"># {{ count }}<br>
<p># {{ count }}</p>
<button v-on:click.prevent="increment" > </button>
<button v-on:click.prevent="decrement" v-if="count">-</button>
</div>
</div>uj5u.com熱心網友回復：
v-if如果里面的陳述句為真，將呈現一個元素。并且v-show將始終呈現元素但不會顯示它，除非里面的陳述句為真。
所以如果你像這樣在減號按鈕上使用v-if="count > 0"或v-show="count > 0"，你應該實作你的目標。
<button v-if="count >= 0" v-on:click.prevent="decrement">-</button>
同樣，如果您有一個不想超過的最大值，則可以在計數達到最大值時使用v-if="count < max_value"或v-show="count < max_value"隱藏增量按鈕。
希望這會有所幫助 :) 有關更多資訊，您可以在此處閱讀檔案：https : //vuejs.org/v2/guide/index.html#Conditionals-and-Loops
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/332924.html
標籤：javascript Vue.js 按钮 前端 点击
上一篇：等待fetch獲取資料