vue.js - Vue v-用于条件样式

Question

我v-for用来创建按钮。isActiveButton()如果返回 true ，我添加 .active 类：

<button 
  v-for="(text, index) in this.buttonOptions" 
  class="btn" 
  :class="{active: isActiveButton(text)}" 
  :value='text' 
  @mousedown.prevent @click="some_method">
    {{text}}
</button>

如果全部isActive()返回false，将 .active 类添加到第一个按钮的最佳方法是什么？请注意，这是一个道具。 buttonOptionsbuttonOptions

标签： vue.jsvuejs2

Answer 1

计算属性将是要走的路！

var app = new Vue({
  el: '#app',
  data: {
    buttonOptions: ['button1', 'button2', 'button3', 'button4']
  },
  methods: {
    isActiveButton: function (text) {
      return (text === text.toUpperCase());
    },
    some_method: function() {
      console.log('Button clicked')
    }
  },
  computed: {
    shouldFirstBeActive: function () {
      return (this.buttonOptions.filter(el => this.isActiveButton(el))).length === 0
    }
  }
});

.active {
  background: #f00;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <section>
    <button 
      v-for="(text, index) in buttonOptions" 
      class="btn" 
      :class="{active: isActiveButton(text) || (shouldFirstBeActive && index === 0)}" 
      :value='text' 
      @mousedown.prevent @click="some_method">
        {{text}}
    </button>
  </section>
</div>

我不知道这些方法的isActiveButton作用，所以我不得不即兴发挥：它检查字符串是否为大写。

诀窍是如果数组中的所有项目都未能通过该方法，则shouldFirstBeActive返回计算属性： truebuttonOptionsisActiveButton

return (this.buttonOptions.filter(el => this.isActiveButton(el))).length === 0  

例如，如果您将 更改button2为 BUTTON2，则isActiveButton返回true该项目，这会将shouldFirstBeActive计算属性呈现为false

var app = new Vue({
  el: '#app',
  data: {
    buttonOptions: ['button1', 'BUTTON2', 'button3', 'button4']
  },
  methods: {
    isActiveButton: function (text) {
      return (text === text.toUpperCase());
    },
    some_method: function() {
      console.log('Button clicked')
    }
  },
  computed: {
    shouldFirstBeActive: function () {
      return (this.buttonOptions.filter(el => this.isActiveButton(el))).length === 0
    }
  }
});

.active {
  background: #f00;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <section>
    <button 
      v-for="(text, index) in buttonOptions" 
      class="btn" 
      :class="{active: isActiveButton(text) || (shouldFirstBeActive && index === 0)}" 
      :value='text' 
      @mousedown.prevent @click="some_method">
        {{text}}
    </button>
  </section>
</div>