If statement 如何将v-if与Vue.js中的值进行比较

我有以下数据，我希望检查用户是否具有管理员角色

{
    "users": [
      {
        "id": 3,
        "first_name": "Joe",
        "last_name": "Blogs",
        "roles": [
          {
            "id": 1,
            "name": "Admin",
            "created_at": "2015-12-25 15:58:28",
            "updated_at": "2015-12-25 15:58:28",
            "pivot": {
              "user_id": 3,
              "role_id": 1,
              "created_at": "2015-12-25 16:03:09",
              "updated_at": "2015-12-25 16:03:09"
            }
          },
          {
            "id": 2,
            "name": "Member",
            "created_at": "2015-12-25 15:58:28",
            "updated_at": "2015-12-25 15:58:28",
            "pivot": {
              "user_id": 3,
              "role_id": 2,
              "created_at": "2015-12-25 16:03:09",
              "updated_at": "2015-12-25 16:03:09"
            }
          }
        ],
      }
    ]
  } 

在我的html中有以下内容，但是如何使用v-if指令检查用户是否具有管理员角色？另一个问题是，如果条件不真实，下面的v-if指令也会生成不必要的html标记

    <tr>
        <th>User</th>
        <th>Admin</th>
        <th></th>
    </tr>
    <tr v-for="user in users">
          <td>
               @{{user.first_name}} @{{user.last_name}}
          </td>
          <td>
              <span v-for="role in user.roles">
                   <span v-if="role.name" == 'Admin'>Yes</span>
                   <span v-else>-</span>
              </span>
          </td>
    </tr>

使用者
管理
@{{user.first{u name}}@{{user.last{u name}
对
-

您的html有语法问题，应该是：

<span v-for="role in user.roles">
    <span v-if="role.name == 'Admin'">Yes</span>
    <span v-else>-</span>
</span>

对
-

不过，对于用户拥有的每个角色，您仍然有额外的跨度

使用方法检查用户是否具有管理员角色更简单，这样您就不会有额外的html：

<div id="container">
  <table>
    <tr>
      <th>User</th>
      <th>Admin</th>
      <th></th>
    </tr>
    <tr v-for="user in users">
      <td>
        {{user.first_name}} {{user.last_name}}
      </td>
      <td>
        {{isAdmin(user)}}
      </td>
    </tr>
  </table>
</div>

使用者
管理
{{user.first{u name}{{user.last{u name}}
{{isAdmin（用户）}

还有javascript：

new Vue({
  el: '#container',
  data: {
    "users": [{
      "id": 3,
      "first_name": "Joe",
      "last_name": "Blogs",
      "roles": [{
        "id": 1,
        "name": "Admin",
        "created_at": "2015-12-25 15:58:28",
        "updated_at": "2015-12-25 15:58:28",
        "pivot": {
          "user_id": 3,
          "role_id": 1,
          "created_at": "2015-12-25 16:03:09",
          "updated_at": "2015-12-25 16:03:09"
        }
      }, {
        "id": 2,
        "name": "Member",
        "created_at": "2015-12-25 15:58:28",
        "updated_at": "2015-12-25 15:58:28",
        "pivot": {
          "user_id": 3,
          "role_id": 2,
          "created_at": "2015-12-25 16:03:09",
          "updated_at": "2015-12-25 16:03:09"
        }
      }],
    }]
  },
  methods: {
    isAdmin: function(user) {
      var i;
      for (i = 0; i < user.roles.length; i++) {
        if (user.roles[i].name === "Admin") {
          return "Yes";
        }
      }

      return "-";
    }
  }
});

newvue({
el:'集装箱'，
数据：{
“用户”：[{
“id”：3，
“名字”：“乔”，
“姓氏”：“博客”，
“角色”：[{
“id”：1，
“名称”：“管理员”，
“创建时间”：“2015-12-25 15:58:28”，
“更新时间”：“2015-12-25 15:58:28”，
“支点”：{
“用户id”：3，
“角色id”：1，
“创建时间”：“2015-12-25 16:03:09”，
“更新时间：”2015-12-25 16:03:09
}
}, {
“id”：2，
“姓名”：“成员”，
“创建时间”：“2015-12-25 15:58:28”，
“更新时间”：“2015-12-25 15:58:28”，
“支点”：{
“用户id”：3，
“角色id”：2，
“创建时间”：“2015-12-25 16:03:09”，
“更新时间：”2015-12-25 16:03:09
}
}],
}]
},
方法：{
isAdmin:函数（用户）{
var i；
对于（i=0；i

---

这里的工作示例：

酷！我试着用双引号来比较D