Question

请帮助。我需要数组中N个数字的列表，例如背景色，例如，每个li元素在单击时都会更改为黄色和粉色。
像1个背景：黄色， 2背景：粉红色， 3背景：黄色 4背景：粉红色等

我现在每次单击事件中所有li元素的背景色都相同，颜色在变化，但同时都在改变。

new Vue({
    el: '#app',
    data: {
        isDark: false,
        log: [],
        count: 1
    },
    methods:{
    somefunc: function(){
        this.log.push(this.count++);
        this.isDark = !this.isDark;
    }
}
});



  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
  <div >
    <ul>
      <li v-for="(ing, i ) in log" :class="[ isDark ? 'background-yellow' : 'background-pink' ]"  >
         {{ ing }} 
      </li>
      </ul>
      <button @click="somefunc">Press</button>
  </div>
</div>

Answer 1

所有项目的颜色都会发生变化，因为它们都引用了在Vue实例上定义的isDark的同一实例。相反，您将需要在isDark数组中的每个元素上设置log属性，或者具有每个索引及其isDark值的单独数组。带有单独的数组：

data: {
    logColors: [],
    ...
},
methods: {
    somefunc () {
        this.log.push(this.count++)
        this.logColors.push(!this.isDark)
    }
}

在li元素的模板标记中：

<li ... :class="logColors[i].isDark ? 'background-yellow' : 'background-pink'">
...
</li>

如果您想将isDark作为log中项目的属性：

脚本

methods: {
    somefunc () {
        this.log.push({ value: this.count++, isDark: !this.isDark })
    }
}

标记

<li ... :class="log[i].isDark ? 'background-yellow' : 'background-pink'">
{{ing.value}}
</li>

ul li背景颜色更改vuejs

1 个答案: