鍍金池/ 問答/HTML5  HTML/ vue點擊切換div樣式的問題

vue點擊切換div樣式的問題

通過后臺數(shù)據(jù)遍歷出10個樣式相同的DIV 都是統(tǒng)一的默認(rèn)樣式 點擊其中任何一個 改變樣式 其他的還是默認(rèn)樣式 再點擊這個改變樣式的div 樣式恢復(fù)默認(rèn)

vue改怎么實現(xiàn)

 <div class = "foods-wrapper">
      <div class="fooList" v-for="(item,index) in goods" >
        <div v-for="food in item.foods" v-show="name==item.name" class = 'food' :class="{'food-selected':index == activeIndex}"  @click ="addCart(food,index)" >
          <span>{{food.name}}</span>
          <span>￥{{food.price}}</span>
   
          </div>
      </div>
    </div>
 methods:{
    addCart(food,index) {
     this.cartList.push(food)
     this.activeIndex = index
     if (!food.count) {
        Vue.set(food, 'count', 1)
      }
      console.log(food)
    },
回答
編輯回答
夢一場

你的代碼在第二個循環(huán)里加上索引，傳值時傳foodIndex，因為你要的是點擊food

 <div v-for="(food,foodIndex) in item.foods" v-show="name==item.name" class = 'food' :class="{'food-selected':foodIndex== activeIndex}"  @click ="addCart(food,foodIndex)" >

我的demo也換為多層循環(huán)了，數(shù)據(jù)結(jié)構(gòu)跟你差不多，一樣的可以的，你要注意下每層循環(huán)的索引要對應(yīng)每一層，不要寫錯了

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>changeClass</title>
  <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
<style>
.active{color:red;}
</style>
</head>
<body>

<div id="app">
  <div>
    <div v-for="(item,index) in goods">
      {{item.value}}
      <div v-for="(food,foodIndex) in item.foods" class="default" :class="{'active':item.activeIndex == foodIndex}" @click="changeClass(index,foodIndex)">
        {{food.name}}
      </div>
    </div>
  </div>
</div>
</body>
</html>

<script>
var app = new Vue({
  el:'#app',
  data:{
    goods:[
      {value:'食物',foods:[{name:1},{name:2},{name:3},{name:4}],activeIndex:null},
      {value:'菜',foods:[{name:1},{name:2},{name:3},{name:4}],activeIndex:null},
      {value:'飲料',foods:[{name:1},{name:2},{name:3},{name:4}],activeIndex:null}
    ],
  },
  methods:{
    changeClass:function(index,foodIndex){
      if(this.goods[index].activeIndex == foodIndex){
        this.goods[index].activeIndex = null;
      }else{
        this.goods[index].activeIndex = foodIndex;
      }
    }
  }
})
</script>
2017年10月3日 13:40
編輯回答
離殤

我不上代碼 給你思路 后臺給的數(shù)據(jù) 在綁定的vue之前 你需要遍歷一遍 給每個Item 加上一個屬性 例如：checked:false，當(dāng)點擊的時候只給當(dāng)前的Item下的checked:true 然后是否添加class跟句這個checked做判斷就可以了。

2017年12月20日 17:26
編輯回答
鹿惑

這樣寫可以達(dá)到你要的效果，不過建議把key寫上

2017年9月23日 02:51
編輯回答
短嘆
  <div class="list">
    <ul>
      <li :class="num == item ? 'active' : ''" v-for="(item, key) in arr" :key="key" @click.stop = 'active(item)'>{{item}}list</li>
    </ul>
  </div>
<script>
export default {
  data () {
    return {
      num: 0,
      arr: [1, 2, 3, 4, 5, 6, 7]
    }
  },
  methods: {
    active (n) {
      this.num = n
    }
  }
}
</script>

<style lang='scss' scoped>
.list {

ul {
  display: flex;
  display: -webkit-flex;
  width: 7.5rem;
  margin: 0 auto;
  li {
    width: 1rem;
  }
  .active {
    background: #0ff;
  }
}

}
</style>

2017年12月30日 23:29