第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

Vue使用v-for遍歷出數(shù)據(jù)后,某些功能的實(shí)現(xiàn),希望給點(diǎn)幫助或想法。

Vue使用v-for遍歷出數(shù)據(jù)后,某些功能的實(shí)現(xiàn),希望給點(diǎn)幫助或想法。

哈士奇WWW 2018-12-27 18:15:43
//attr數(shù)據(jù)"attr":[    {    "attrName":"顏色",    "attrList":[{"attrVal":"紫色"},{"attrVal":"紅色"}]    },    {    "attrName":"型號(hào)",    "attrList":[{"attrVal":"大號(hào)"},{"attrVal":"中號(hào)"},{"attrVal":"小號(hào)"}]    }],//v-for的實(shí)現(xiàn)<div class="pro-attr">    <div class="pro-attr-list" v-for="item in numData.attr">    <h2>{{item.attrName}}</h2>    <ul>        <li v-for="listName in item.attrList" :class="{active:listName.attrVal==actAttr}" @click="actAttrFlag(listName.attrVal)">{{listName.attrVal}}</li>    </ul>    </div></div>渲染出來(lái)的結(jié)果問(wèn)題:因?yàn)閷傩詻](méi)有確定有多少個(gè),所以只能循環(huán)出來(lái) ,這樣做出來(lái)的結(jié)果是不管是顏色和型號(hào)的所有選項(xiàng)中只能一個(gè)被選中,而我想要的結(jié)果是,顏色可以有一個(gè)被選中,型號(hào)也有一個(gè)可以被選中,我應(yīng)該怎么改,或者有思路提供下也行,謝謝。
查看完整描述

1 回答

?
當(dāng)年話下

TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個(gè)贊

直接上代碼咯,其實(shí)選好被選中屬性的數(shù)據(jù)結(jié)構(gòu)一樣可以解決問(wèn)題


<div class="container">

  <div v-for="(item, key) in attr">

    <h2>{{item.attrName}}</h2>

    <ul>

      <li v-for="attrItem of item.attrList" v-bind:class="{active: actAttr[key].value == attrItem.attrVal}" @click="selectItem(key, attrItem.attrVal)">

        {{attrItem.attrVal}}

      </li>

    </ul>

  </div> 

</div>

</template>

<script type="text/javascript">

export default {

  data () {

    return {

      actAttr: [{

        attrName: '顏色',

        value: '紅色'

      }, {

        attrName: '型號(hào)',

        value: '中號(hào)'

      }],

      attr: [{

        attrName: '顏色',

        attrList: [{

          attrVal: '紫色'

        }, {

          attrVal: '紅色'

        }]

      }, {

        attrName: '型號(hào)',

        attrList: [{

          attrVal: '大號(hào)'

        }, {

          attrVal: '中號(hào)'

        }, {

          attrVal: '小號(hào)'

        }]

      }]

    }

  },

  methods: {

    selectItem (key, val) {

      console.log(val)

      this.actAttr.splice(key, 1, {

        attrName: this.attr[key].attrName,

        value: val

      })

      console.log(this.actAttr[key])

    }

  }

}

</script>

<style type="text/css">

.container {

  text-align: left;

}

.active {

  color: red;

}

</style>


查看完整回答
反對(duì) 回復(fù) 2019-01-29
  • 1 回答
  • 0 關(guān)注
  • 581 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)