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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在遍歷數(shù)組時執(zhí)行綁定

如何在遍歷數(shù)組時執(zhí)行綁定

萬千封印 2022-01-13 15:11:03
我有一個名為users: users: [            { 'name': 'Sam', 'level': 'level 1' },            { 'name': 'Jhon', 'level': 'level 2'},            { 'name': 'Doe', 'level': 'level 3'},            { 'name': 'Jane', 'level': 'level 4'},            { 'name': 'Smith', 'level': 'level 1'},            { 'name': 'Roy', 'level': 'level 4'},        ]在模板中,我正在循環(huán)并顯示users如下名稱:   <div id="app">        <div class="main-div"  v-for="user in users">           <p>{{user.name}} <span>{{userType}}</span></p>        </div>    </div>如數(shù)組(即用戶)所示,有一個名為 的屬性level,基于此屬性我想綁定 userType(即 CEO,經(jīng)理...等),如下所示:例如,如果level 1====> 應該顯示'Director',level 2====> 應該顯示'Manager',.....等等。
查看完整描述

2 回答

?
達令說

TA貢獻1821條經(jīng)驗 獲得超6個贊

不,您需要方法作為根據(jù)其級別進行顯示的助手,如下所示..


new Vue({

  el: '#app',

  data: {

    users: [

        { 'name': 'Sam', 'level': 'level 1' },

        { 'name': 'Jhon', 'level': 'level 2'},

        { 'name': 'Doe', 'level': 'level 3'},

        { 'name': 'Jane', 'level': 'level 4'},

         { 'name': 'Smith', 'level': 'level 1'},

        { 'name': 'Roy', 'level': 'level 4'},

    ]

  },

  methods: {

    userType: function(level) {

      let type = ''

      switch(level) {

        case 'level 1': type = 'CEO';break;

        case 'level 2': type = 'Director';break;

        case 'level 3': type = 'Manager';break;

        case 'level 4': type = 'employee'; break;

      }

      return type

    }

  }

})

#app {

  padding: 20px;

}


h3 {

  font-weight: bold;

}


span {

  fonct-weight: bold;

  color: red;

}

<script src="https://unpkg.com/vue"></script>


<div id="app">

  <h3>Users</h3>

  <div class="main-div" v-for="user in users">

    <p>{{user.name}} <span>{{userType(user.level)}}</span></p>

  </div>

</div>


查看完整回答
反對 回復 2022-01-13
?
阿波羅的戰(zhàn)車

TA貢獻1862條經(jīng)驗 獲得超6個贊

您應該有一些與 userType 映射的級別數(shù)組,或者您可以在用戶數(shù)組中添加新屬性。例如:[{name: "XYZ", level: "level1", userType: "Director"} ...]


如果您沒有這個數(shù)組,那么您需要添加一個條件或檢查并返回給您的函數(shù)。例如:


{{getUserInfo(user)}}


getUserInfo(user) {

  if (user.level === 'Level1') {

    return user["name"] + ' Manager'

}


查看完整回答
反對 回復 2022-01-13
  • 2 回答
  • 0 關(guān)注
  • 154 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

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