gpt4 book ai didi

javascript - v-bind :class 的 Vue.js 计算属性

转载 作者:数据小太阳 更新时间:2023-10-29 04:53:43 26 4
gpt4 key购买 nike

如果我有一个返回 true 或 false 的计算函数,我知道如何使用 v-bind:class。

我想知道是否可以使用与被单击按钮的 ID 和该按钮的值相匹配的计算属性。因此,单击按钮 1 我可以获得该按钮的值,并检查它是否与绑定(bind)到输入的数据模型的值匹配。

目前按钮的值已同步到 Vue 数据属性。

<label v-bind:class="myBtnClass">
<input type="radio" name="button1" id="button1" value="1" v-model="valueOfBtn"> One
</label>
<label v-bind:class="myBtnClass">
<input type="radio" name="button2" id="button2" value="2" v-model="valueOfBtn"> Two
</label>

new Vue({
el: '#app',

data: {
'valueOfBtn': 1

这个位只适用于一个按钮,显然我不想重复这个代码块 x 次。

computed: {

myBtnClass: function () {
var result = [];
if (this.valueOfBtn) == document.getElementById('button1').value.valueOf()))
{
result.push('primary');
}
return result;

提前致谢

最佳答案

改用方法:

export default = {
methods: {

myBtnClass: function(name) {
var result = [];
if (this.valueOfBtn) === name) {
result.push('primary');
}
return result;
},
// ...
}
}

和 HTML:

<label v-bind:class="myBtnClass('button1')">
....
<label v-bind:class="myBtnClass('button2')">

关于javascript - v-bind :class 的 Vue.js 计算属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37343923/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com