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

Question

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

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

当前按钮的值已同步到 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;

提前致谢

Answer 1

改用methods：

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')">

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

Vue.js computed property for v-bind:class

javascript

vue.js

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

Vue.js computed property for v-bind:class

javascript

vue.js

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