代码之家 › 专栏 › 技术社区 › Dmitry Bubnenkov

如何根据v-for中的键更改样式?

vue.js

0

Dmitry Bubnenkov · 技术社区 · 6 年前

我试图写一个小的应用程序,改变风格依赖于键 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/

似乎我应该使用计算属性,但我不知道如何正确地使用它。

0 回复 | 直到 6 年前

1

2

Jacob Goh 6 年前

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'
          }
      }
    }
  }
})

2

0

Vaibhav Singh 6 年前

可以为颜色再添加一个数据对象。 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>

3

0

halfer Jatin Pandey 6 年前

对我来说,这很好用,

试试这个:

<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>