javascript - 如何在循环数组时执行绑定(bind)

Question

我有一个名为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'},
        ]

在模板中，我循环并显示用户名称，如下所示:

   <div id="app">
        <div class="main-div"  v-for="user in users">
           <p>{{user.name}} <span>{{userType}}</span></p>
        </div>
    </div>

如数组(即用户)所示，有一个名为level的属性，基于此属性我想要绑定(bind)userType(即CEO，经理...等等)像这样:

例如，如果

level 1 ====> 应显示“Director”，
level 2 ====> 应显示“Manager”，......等等。

Fiddle Example

Answer 1

不，您需要方法作为帮助程序来根据其级别进行显示，如下所示..

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>