javascript - 我可以使用计算属性来有条件地设置表格行的样式吗?
问题描述
我正在呈现一个用户表,我希望只为当前用户突出显示整行。
我认为最简单的方法是通过计算属性,但我无法让它工作。
在下面的代码中的评论是我的想法,但它不会呈现。我只想要当前用户“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>
推荐阅读
- c# - 按日期搜索不会检索到正确的数据
- postgresql - 有没有办法长时间减少行数?使用 timescale/postgresql 进行数据抽取
- r - 将数据框的列转换为R中的列表
- mysql - MySQL中如何根据特定条件选择最近记录的组
- laravel - 动态网址 laravel
- adobe-indesign - Indesign Script:循环所有段落(包括在overset中)
- scala - 如何在火花作业中获取 gcloud dataproc 创建标志?
- r - 在 DT 中嵌入具有混合 numericInput 和 selectInput 的列:反应表
- c# - 如何使用 Microsoft WebView2 同时登录多个帐户
- visual-studio - 更改突出显示的引用的外观(C++、C#、Visual Studio 2019)