如何使用if语句禁用vue.js中的按钮？
如何使用if语句禁用vue.js中的按钮？
提问于 2022-02-16 13:40:52
我用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>回答 4
Stack Overflow用户
回答已采纳
发布于 2022-02-16 14:28:46
尝试使用计算属性获取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>
Stack Overflow用户
发布于 2022-02-16 14:21:08
我不确定代码中所有的随机星号，但我很确定您想使用计算性质
export default {
data() {
return {
count: 0,
}
},
computed: {
blockCount() {
return this.count > 5
}
}
}Stack Overflow用户
发布于 2022-02-16 14:48:47
在Vue中，数据属性中的所有内容都包装在一个反应性代理中，这意味着当您更改值时，使用该属性的任何内容都将收到一个值更改事件，这意味着您不需要手动更新blockCount的值，您可以使用计算的属性监视计数的值并返回一个预先计算的值。
这也将巧合地删除
<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对象的每个实例都将绑定到相同的内存空间，因此将相互冲突。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71142923
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号