vbind：class 的 Vue.js 计算(computed)属性

<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

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;
    },
  // ...
  }
}

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

Vue.js相关问答推荐

虚拟DOM在Vue中姗姗来迟

vue 不重新渲染数据更改

使用 nuxt.js 组件自动导入对性能不利吗？

在Vue cli项目中，Laravel api app放在哪里以及如何在vue js中调用api？

VueJS：在组件之间使用全局对象的最佳实践？

Vue动态mapGetters

Vuetify Datatable - 在所有列上启用内容编辑

在组件的样式部分使用 Vue 变量

如何有条件地更改 vue/vuetify 文本字段 colored颜色

等待来自 WDS 的更新信号

Vuetify 单选按钮未显示为选中状态

使用 Vee-Validate 在提交时验证子输入组件

如何告诉 Vue 应用使用 Firebase 模拟器？

如何在 Vuex 中获取 Vue 路由参数？

为 Vue 组件动态添加属性

在Vue中单击路由链接上的激活方法

来自 Vue.js 的 ESLint 插件的消息中的LHS是什么意思？

Laravel 和 Vue - handler.call 不是函数

组件已注册但未使用 vue/no-unused-components

返回 VueJS 方法的Native Code消息