Question

我想显示基于access的选项列。如果访问是学生，则应该显示“计算机和书本”列；如果访问是安全的，则应该显示“教师”和“系统”列。

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>

Answer 1

问什么时应该更加清楚。试试这个

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 }}&nbsp;</span>
      </td>
    </tr>
  </table>
</div>

使用vue.js动态显示/隐藏列

1 个答案: