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相关问答推荐

我可以将Created()中内置的内容传递给Provide属性吗？

vue3中的转换可以在滑入但不能滑出时工作

设置Vite Vue 3需要多个应用程序输出目录

带 Bootstrap 的 Vue js，导航栏菜单不起作用

如何在Vue3中使用vuechartjs 5.2从父组件更新图表

使用内部方法创建计算(computed)属性是否合法？

在 Vue 中删除自定义组件代码重复的方法？

未捕获的类型错误：无法读取未定义的属性initializeApp

Express.js + lint 出错

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

如何判断 Vue 组件是否处于活动状态

将自定义部分添加到 v-autocomplete 下拉列表

vuex： unknown getter： user

即使在客户端设置 Access-Control-Allow-Origin 或其他 Access-Control-Allow-* 标头后也出现 CORS 错误

Vue.js 如果在视图中

Amazon EC2 错误：监听 EACCES 0.0.0.0：80

Vuetify - 如何在 v-data-table 中单击时突出显示行

错误：vue-loader 要求 @vue/compiler-sfc 存在于依赖树中

我在 Nuxt 2.14.0 中运行的是什么版本的 Vue？

Vue 2 转换不起作用