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>

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'
}
添加回答
舉報