使用vue.js动态显示/隐藏列
使用vue.js动态显示/隐藏列
提问于 2020-06-10 23:35:49
我想显示基于access.computer的选项列和图书列应该显示，如果访问是学生和教师和系统列应该显示，如果访问是安全的。
data() {
return {
options: ['computer, 'books', 'system'],
access: ['Student, 'Teacher', 'Security'],
};
},
<template>
<tbody >
<tr>
<td v-for="(item, index) in access" :key="index">{{item}}></td>
</tr>
<table >
<tr >
<th class=v-for="(option, index) in options" :key="index">
{{option}} </th>
</tr>
</table>
</tbody>
</template>Stack Overflow用户
发布于 2020-06-11 00:46:39
当你问一些事情的时候，你应该更清楚。尝尝这个
const app = new Vue({
el: '#app',
data() {
return {
options: [
{ id: 1, name: 'Computer' },
{ id: 2, name: 'Books' },
{ id: 3, name: 'System' }
],
access: [
{ name: 'Student', options: [1, 2] },
{ name: 'Teacher', options: [1, 2] },
{ name: 'Security', options: [3] },
],
};
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table border="1">
<tr>
<td v-for="(access, index) in access" :key="index">{{ access.name }}</td>
</tr>
<tr>
<td v-for="access in access">
<span v-for="option in access.options" :key="access + option">{{ options.find(tempOpt => tempOpt.id === option).name }} </span>
</td>
</tr>
</table>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62307465
复制相关文章
相似问题
腾讯云开发者
