Question

我正在使用可以打开模式的按钮。默认情况下，它应具有btn-primary-outline类（蓝色文本，透明背景，蓝色边框），单击时应具有btn-primary类（白色文本，蓝色背景，蓝色边框）。但是它不起作用，按钮保持透明，文本为蓝色，并且所有操作都是打开和关闭蓝色按钮的边框。

HTML：

<button v-on:click="settingsButtonIsActive = !settingsButtonIsActive" 
    class="btn margin-top-half center-block col-xs-12"
    :class="[settingsButtonIsActive ? 'btn-primary' : '', 'btn-primary-outline']">
<strong>{{labels.lblButtonConfiguration}}</strong>
</button>

控制器：

data = {
     settingsButtonIsActive: false
}

我觉得按钮不喜欢没有定义这两个类别，但我想不出其他任何方式。

Answer 1

您的“错误”使用数组语法，但“ else”的逻辑为空''（如果settingsButtonIsActive为假render => ''）+始终渲染{{1 }}（btn-primary-outline索引内的The (ternary) operator-索引0上的btn-primary-outline）。

例如：

渲染：

:class="[settingsButtonIsActive ? 'btn-primary' : '', 'btn-primary-outline', 'hello', 'world']">

这不是您的逻辑：

<button class="btn-primary btn-primary-outline hello world">

这是正确的标记（对于-or- a -or- b）-“如果不是”的快捷方式：

var element = document.getElementById("myDIV");

if(settingsButtonIsActive){
  element.classList.add("btn-primary");
}
else{
  element.classList.add(""); 
}

element.classList.add("btn-primary-outline");

不需要她使用数组语法： https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

class="settingsButtonIsActive ? 'btn-primary' : 'btn-primary-outline'">

var app = new Vue({
  el: '#app',
  data: {
    msg: "settingsButtonIsActive",
    settingsButtonIsActive: true,
    isActive: "btn-primary",
    hasError: "btn-primary-outline"
  }
})

button{
  padding: 5px;
  cursor: pointer;
}
.btn-primary{
  background: red;
  border: 1px solid red;
}

.btn-primary-outline{
  background: transparent;
  border: 1px solid red;
}

Answer 2

我建议稍微重写一下代码。

首先，您可以将类名开关写为计算属性：

// ... beginning of your .js code
computed: {
    isButtonActive () {
      return this.settingsButtonIsActive ? 'btn-primary' : 'btn-outline-primary'
    }
}
// ... rest of your .js code

然后，您可以将两个类属性合并为一个，并像这样绑定它：

<button v-on:click="settingsButtonIsActive = !settingsButtonIsActive" 
    :class="['btn', 'margin-top-half', 'center-block', 'col-xs-12', isButtonActiveClass">
  <strong>{{labels.lblButtonConfiguration}}</strong>
</button>

还有另一种选择，但是因为您在两个类之间进行了更改，所以我认为计算属性是一种更简洁的解决方案。但是，您也可以使用以下代码获得相同的结果：

<button v-on:click="settingsButtonIsActive = !settingsButtonIsActive" 
    :class="['btn', 'margin-top-half', 'center-block', 'col-xs-12', {'btn-primary': isButtonActiveClass}, {'btn-outline-primary': !isButtonActiveClass}">
  <strong>{{labels.lblButtonConfiguration}}</strong>
</button>

请注意，当我想动态更改类时，我正在将一个对象传递给数组。

更多信息可以在https://vuejs.org/v2/guide/class-and-style.html上找到。

Answer 3

我通过使用对象语法而不是数组语法来修复它。

<button v-on:click="settingsButtonIsActive = !settingsButtonIsActive"
        class="btn margin-top-half center-block col-xs-12"
        :class="{'btn-primary' : settingsButtonIsActive === true, 'btn-primary-outline' : settingsButtonIsActive === false}">
    <strong>{{labels.lblButtonConfiguration}}</strong>
</button>

带v-on的按钮：单击该按钮无法在btn-primary和btn-primary-outline类之间切换

3 个答案: