我的v-bind有点问题,它不起作用

javascript html css vue.js 匿名 | 2020-08-01 20:15:14


我正在学习VueJs,但我对v-bind有点困惑!我有4button秒,我想在特定的
active
类中使用
button
当我单击该按钮时,似乎没有调用该方法!例如,如果我单击
home
按钮,
home
按钮的活动类将变为红色。如果我单击
watch
按钮,
home
按钮将变为黑色,
watch
按钮将变为红色。但当我点击
watch
按钮时,一切都变黑了。我怎样才能修好它?对不起我的英语。
这是我的vue.js版文件
new Vue({
el: "#center-element",
data: {
homeActive: true,
watchActive: false,
groupActive: false,
gameActive: false,
},
methods: {
homeActiveMethod: function () {
this.homeActive = true;
this.watchActive = false;
this.groupActive = false;
this.gameActive = false;
},
watchActiveMethod: function () {
this.homeActive = false;
this.watchActive = true;
this.groupActive = false;
this.gameActive = false;
},
groupActiveMethod: function () {
this.homeActive = false;
this.watchActive = false;
this.groupActive = true;
this.gameActive = false;
},
watchActiveMethod: function () {
this.homeActive = false;
this.watchActive = false;
this.groupActive = false;
this.gameActive = true;
},
},
});

html


css
.active{
color: red;
border-bottom: 5px;
border-bottom-style:solid;
border-bottom-color: red;
}






3 答案



在Vue中,不需要使用
标记。把它们取下来,可能会有用。
顺便说一句,通过对当前活动链接使用单个变量,可以显著减少Vue组件中的代码量:
  data: {
activeLink: ""
},
methods: {
setActiveLink(activeLink) {
this.activeLink = activeLink;
}
},


我还建议使用
  • 指令生成
    [3]
    标记。

    2020-08-03 01:21:15
    匿名


    在Vue中,不需要使用
    标记。把它们取下来,可能会有用。
    顺便说一句,通过对当前活动链接使用单个变量,可以显著减少Vue组件中的代码量:
      data: {
    activeLink: ""
    },
    methods: {
    setActiveLink(activeLink) {
    this.activeLink = activeLink;
    }
    },


    我还建议使用
  • 指令生成
    [3]
    标记。

    2020-08-02 14:41:56
    匿名


    在Vue中,不需要使用
    标记。把它们取下来,可能会有用。
    顺便说一句,通过对当前活动链接使用单个变量,可以显著减少Vue组件中的代码量:
      data: {
    activeLink: ""
    },
    methods: {
    setActiveLink(activeLink) {
    this.activeLink = activeLink;
    }
    },


    我还建议使用
  • 指令生成
    [3]
    标记。

    2020-08-01 20:15:26
    匿名


    World is powered by solitude
    备案号:湘ICP备19012068号