我用 vue.js 創建了一個計數器。我使用了一種帶有 if 方法的方法來禁用按鈕（如果計數> 5，則增量按鈕被禁用）。但我不明白為什么它禁用了我所有的按鈕。如果有人可以幫助我，那就太好了！
有代碼：
<body>
<div id="app">
<button @click="count " v-bind:disabled="blockCount">increment</button>
<button @click="count--">decrement</button>
<p>The count is {{ count }}</p>
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
<p v-if="count >= 7" blockCountChange()> </p>
</div>
<script>
const example1 = new Vue({
el: '#app',
data: {
message: 'Hello Vue ! Just a test',
count:'',
blockCount: false
},
methods: {
reverseMessage: function () {
this.message = this.message.split(' ').reverse().join(' ')
},
blockCountChange: {
function() {
if (this.count>5) {
return this.blockCount = true;
}
}
}
}
});
</script>
</body>
uj5u.com熱心網友回復：
我不確定代碼中的所有隨機星號，但我很確定你想使用計算屬性
export default {
data() {
return {
count: 0,
}
},
computed: {
blockCount() {
return this.count > 5
}
}
}
uj5u.com熱心網友回復：
嘗試使用計算屬性來獲取blockCount.
作業演示：
new Vue({
el: '#app',
data: {
message: 'Hello Vue ! Just a test',
count: '',
blockCount: false
},
computed: {
getblockCount() {
this.blockCount = this.count > 5
return this.blockCount;
}
},
methods: {
reverseMessage: function () {
this.message = this.message.split(' ').reverse().join(' ')
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="count " :disabled="getblockCount">increment</button>
<button @click="count--">decrement</button>
<p>The count is {{ count }}</p>
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
<p> <span v-if="count >= 5">You click on the counter enough ! STOP IT !</span></p>
</div>uj5u.com熱心網友回復：
在 Vue 中，data 屬性中的所有內容都包裝在一個回應式代理中，這意味著任何使用該屬性的東西都會在您更改值時收到值更改事件，這意味著您不需要手動更新 的值blockCount，您可以使用計算屬性來監控 count 的值并回傳一個預先計算的值
這也將巧合地洗掉
<p v-if="count >= 7" blockCountChange()> </p>
這是我認為您遇到的問題的實際根源
這意味著您的代碼看起來像這樣
<body>
<div id="app">
<button @click="count " :disabled="blockCount">increment</button>
<button @click="count--">decrement</button>
<p>The count is {{ count }}</p>
<p>{{ message }}</p>
<button @click="reverseMessage">Reverse Message</button>
</div>
<script>
const example1 = new Vue({
el: "#app",
data() {
return {
message: "Hello Vue ! Just a test",
count: 0,//this is a number so use a number
}
},
computed:{
blockCount(){
return this.count > 5
}
},
methods: {
reverseMessage() {
this.message = this.message.split(" ").reverse().join(" ");
},
},
});
</script>
</body>
還要注意 data 屬性應該是一個回傳默認值的函式，如果你指定一個物件，那么你的 vue 物件的每個實體都將系結到相同的記憶體空間，因此會相互沖突
uj5u.com熱心網友回復：
你可以看看這個示例代碼
我們可以使用觀察者來計算和撰寫我們想要執行的操作。
new Vue({
el: '#app',
data: {
message: 'Hello Vue ! Just a test',
count: 0,
question: '',
incrementDesabled: false,
decrementDesabled: true
},
watch: {
// whenever count changes, this function will run
count(newCount, oldCount) {
if(newCount == 0){
this.decrementDesabled = true;
}
else if(newCount >= 5){
this.incrementDesabled = true;
this.decrementDesabled = false;
}else if(newCount <= 5){
this.incrementDesabled = false;
this.decrementDesabled = false;
}
}
},
methods: {
reverseMessage: function () {
this.message = this.message.split(' ').reverse().join(' ')
}
}
});<body>
<div id="app">
<button @click="count " v-bind:disabled="incrementDesabled">increment</button>
<button @click="count--" v-bind:disabled="decrementDesabled">decrement</button>
<p>The count is {{ count }}</p>
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script src="index.pack.js"></script>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/426736.html
標籤：javascript Vue.js