Class v-for中的Vuejs切换类

我正在用v-for循环制作一个项目列表。我有一些来自服务器的API数据

items: [
   {
       foo: 'something',
       number: 1
   },
   {
       foo: 'anything',
       number: 2
   }
]

我的模板是：

<div v-for(item,index) in items @click=toggleActive>
     {{ item.foo }} 
     {{ item.number }} 
</div>

如何使用：class={active:something}切换活动类？

---

P.S我在项目中没有布尔值

您可以尝试实现如下内容：

<div 
  v-for="(item, index) in items"
  v-bind:key="item.id" // or alternativelly use `index`.
  v-bind:class={'active': activeItem[item.id]}
  @click="toggleActive(item)"
>

---

我也有同样的问题，虽然要找到大量有用的信息并不容易，但实现起来却相对简单。我有一个商店的列表，它映射到一种可点击按钮的标签云。当其中一个被单击时，“added”类被添加到链接中。标记：

<div class="col-sm-10">
    <a href="#" class="tagCloud" v-for="store in stores" v-on:click="toggleAdd(store)" v-bind:class="{ 'added': selectedStoreIds.indexOf(store.id) !== -1 }">{{ store.name }}</a>
</div>

---

帮助我解决了很多问题。

可以分两步完成

1） 在父组件中创建v-for循环，如

<myComponent v-for="item in itemsList"/>

data() {
  return {
    itemsList: ['itemOne', 'itemTwo', 'itemThree']
  }
}

数据（）{
返回{
项目列表：['itemOne'，'itemTwo'，'itemThree']
}
}

2） 使用所有必要的逻辑创建子myComponent本身

<div :class="someClass" @click="toggleClass"></div>

data(){
  return {
    someClass: "classOne"
  }
},
methods: {
  toggleClass() {
    this.someClass = "classTwo";
  }
}

数据（）{
返回{
someClass：“classOne”
}
},
方法：{
toggleClass（）{
this.someClass=“classTwo”；
}
}

---

这样，v-for循环中的所有元素都将具有单独的逻辑，而不涉及兄弟元素

我在一个项目中工作，我有相同的要求，下面是代码：

您可以忽略CSS并选择vue逻辑：）

newvue({
el:“#应用程序”，
数据：{
项目：[{title:'Finance'，isActive:false}，{title:'advision'，isActive:false}，{title:'Marketing'，isActive:false}]，
},
})

背景：；背景：；背景：：；背景：；背景：：；人体人体：{背景：{背景：{背景：{背景：；背景：；背景：161616；最低高度：500px；边境：边界：1px；边界：1px；边界：1px固体（ccc）背景：1px；边界：1px固体（1px）边界：1px固体（ccc.背景：1px；边界：1px固体；ccc；ccc；ccc；框架：ccc；框架：1px固体；ccc；ccc；填充；填充；填充：填充：15px；填充：15px；填充：15px}。角度。角度下。角度下的方方方方。角度下的角度下，角度下，角度下，角度下一个角度下一个角度下，角度下一个角度下，角度下的角度下的角度下的SV治治治治治治治治治治治。角度下，角度下的SV啊,，.p-card:first child{border radius:8px 8px 0}.c-card:first child{margin top:10px}.c-card:last child.p-card:last child{border radius:0.08px 8px 8px 8px；border bottom:none}.p-title.avatar{背景色：#8d6e92；宽度：40px；高度：40px；边框半径：50%}.p-card.is-open.p-title.avatar{宽度：20px；高度：20px}.p-card{padding:20px 0；背景色：透明}.p-card.打开：第一个子{padding:10px 0 20px}.p-card.打开：最后一个子{padding:20px 0}.p-body{display:none}.p-card.is-open.p-body{display:block}.sec title{font size:12px；margin bottom:10px}

需要在此处添加节标题
{{item.title}

不移动单独组件中的项。它的工作不一致。当我尝试单击另一项时，上一个类未定义。我需要选择多个元素，然后在第二次单击项时，未定义活动类this.activeItem未定义，addActiveItem方法中的“[item.id]：item”是什么？有一个打字错误。

[item.id]：item

基本上是在对象中动态设置属性键的一种方式。它是ES6版本中引入的一种新Javascript功能，名为

计算属性名

。因此，如果

item.id

的值例如为'fooText'，则对象看起来像

{'fooText'：item}

。进一步阅读：

new Vue({
    el: "#productPage",
    data: {
        stores: [] as StoreModel[],
        selectedStoreIds: [] as string[],
    },
    methods: {
        toggleAdd(store: StoreModel) {
            let idx = this.selectedStoreIds.indexOf(store.id);
            if (idx !== -1) {
                this.selectedStoreIds.splice(idx, 1);
            } else {
                this.selectedStoreIds.push(store.id);
            }
    },
    async mounted () {
        this.stores = await this.getStores(); // ajax request to retrieve stores from server
    }
});

<myComponent v-for="item in itemsList"/>

data() {
  return {
    itemsList: ['itemOne', 'itemTwo', 'itemThree']
  }
}

<div :class="someClass" @click="toggleClass"></div>

data(){
  return {
    someClass: "classOne"
  }
},
methods: {
  toggleClass() {
    this.someClass = "classTwo";
  }
}