Question

我正在尝试编写一个小型应用，该应用的样式更改取决于v-for循环中的键。我不知道如何更改样式。

我想将one着色为蓝色，two着色为绿色，three着色为红色。

<div id="app">
  <table>
    <template v-for="(v,k) in tableData">
       <tr v-bind:class="background-color: {{k}}">
        {{v}}   
       </tr>
    </template>
  </table>
</div>

代码：

new Vue({
  el: '#app',
  data: {
    tableData: 
     {
      "one": "I am one",
      "two": "I am two",
      "three": "I am three",
     }
  }
})

这是我的代码https://jsfiddle.net/pevLgf0b/

似乎我应该使用计算属性，但是我不明白如何正确使用它。

Answer 1

演示：https://jsfiddle.net/jacobgoh101/y295qd04/

您可以使用方法来动态获得不同的颜色

<script src="https://unpkg.com/vue"></script>

<div id="app">

  <table>
    <template v-for="(v,k) in tableData">
       <tr v-bind:style="style(k)">
        <td>
          {{v}}   
        </td>
       </tr>

    </template>
  </table>

</div>

new Vue({
  el: '#app',
  data: {
    tableData: {
      "one": "I am one",
      "two": "I am two",
      "three": "I am three",
    }
  },
  methods: {
    style(k) {
      switch (k) {
        case 'one':
          return {
            backgroundColor: 'red'
          }
        case 'two':
          return {
            backgroundColor: 'green'
          }
        case 'three':
          return {
            backgroundColor: 'blue'
          }
      }
    }
  }
})

Answer 2

您可以为颜色添加一个数据对象。 https://jsfiddle.net/pevLgf0b/

new Vue({
  el: '#app',
  data: {
    tableData: 
     {
  	  "one": "I am one",
      "two": "I am two",
      "three": "I am three",
 		 },
     colorData:{
     	"one" : "blue",
      "two" : "green",
      "three" : "red",
     }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">

  <table>
    <template v-for="(v,k) in tableData">
       <tr v-bind:style="{ 'background-color': colorData[k] }">
       <td>{{v}}   </td>
       </tr>
      
    </template>
  </table>
  
</div>

Answer 3

就我而言，这很完美，

我已经根据键绑定了类。我创建了一个函数，该函数将根据值和应用的样式返回适当的类。

尝试一下：

<template>
    <table>
      <template v-for="(v,k) in tableData">
        <tr v-bind:class="applyStyle(k)">
          <td>{{v}}</td>
        </tr>
      </template>
    </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: {
        one: "I am one",
        two: "I am two",
        three: "I am three"
      }
    }
  },
  methods: {
    applyStyle(value) {
      if (value == "one") {
        return "applyRed";
      }
      if (value == "two") {
        return "applyGreen";
      }
      if (value == "three") {
        return "applyBlue";
      }
    }
  }
};
</script>

<style>
.applyRed {
  background-color: red;
}
.applyGreen {
  background-color: green;
}
.applyBlue {
  background-color: blue;
}
</style>

如何更改样式取决于v-for中的键？

3 个答案: