我正在呈现一个用户表,我希望整行仅针对当前用户突出显示。
我认为最简单的方法是通过计算属性,但我无法让它发挥作用。
在下面的代码中,注释是我的想法,但它不会呈现。我只想要当前用户“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>
最佳答案
您不能将参数传递给计算属性,因此它不会填充 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>
关于javascript - 我可以使用计算属性来有条件地设置表格行的样式吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56656033/