javascript - 我可以使用计算属性来有条件地设置表格行的样式吗？

Question

我正在呈现一个用户表，我希望整行仅针对当前用户突出显示。

我认为最简单的方法是通过计算属性，但我无法让它发挥作用。

在下面的代码中，注释是我的想法，但它不会呈现。我只想要当前用户“nathan”上的粉红色突出显示。

new Vue({
  el: '#app',
  data: {
    currentUser: 'nathan',
    users: [{
        name: "nathan",
        email: "nathan@gmail.com"
      },
      {
        name: "sally",
        email: "sally@gmail.com"
      },
      {
        name: "joe",
        email: "joe@gmail.com"
      }
    ],
  },
  computed: {
    styles: function(user) {
      let height = 100

      // something like this?
      // if(user === currentUser)
      if (user) {
        return {
          'background-color': 'pink'
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <table>
    <tr v-for="user in users">
      <td v-bind:style="styles">{{ user.name }}</td>
      <td v-bind:style="styles">{{ user.email }}</td>
    </tr>
  </table>
</div>

Answer 1

您不能将参数传递给计算属性，因此它不会填充 user 参数。

您可以创建一个类并将其添加到您的行中，具体取决于您想要的条件。

new Vue({
  el: '#app',
  data: {
    currentUser: 'nathan',
    users: [{
        name: "nathan",
        email: "nathan@gmail.com"
      },
      {
        name: "sally",
        email: "sally@gmail.com"
      },
      {
        name: "joe",
        email: "joe@gmail.com"
      }
    ],
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <table>
    <tr v-for="user in users" :class="{'current-user' : user.name === currentUser}">
      <td>{{ user.name }}</td>
      <td>{{ user.email }}</td>
    </tr>
  </table>
</div>

<style>
  tr.current-user {
    background-color: pink;
  }
</style>