VueJs有条件的样式/类绑定？

Question

我有一个vuetify数据表，默认情况下，排序设置为true。如何设置仅对碳水化合物和蛋白质排序的集合，也不能仅对碳水化合物和蛋白质设置列类别？不知道我怎么能做到这一点？

这里是pen

<div id="app">
  <v-app id="inspire">
     <v-data-table
       :headers="headers"
        :items="desserts"
       class="elevation-1"
      disable-initial-sort            
      >
     <template v-slot:items="props">
       <td>{{ props.item.name }}</td>
       <td>{{ props.item.calories }}</td>
       <td>{{ props.item.fat }}</td>
       <td>{{ props.item.carbs }}</td>
       <td>{{ props.item.protein }}</td>
       <td>{{ props.item.iron }}</td>
     </template>
  </v-data-table>
 </v-app>

   new Vue({
     el: '#app',
      data () {
        return {
          headers: [
        {
          text: 'Dessert (100g serving)',
         align: 'left',
         sortable: false,
         value: 'name'
       },
       { text: 'Calories', value: 'calories' },
       { text: 'Fat (g)', value: 'fat' },
       { text: 'Carbs (g)', value: 'carbs' },
       { text: 'Protein (g)', value: 'protein' },
       { text: 'Iron (%)', value: 'iron' }
     ],
  desserts: [
    {
      name: 'Frozen Yogurt',
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: '1%'
    },
    {
      name: 'Ice cream sandwich',
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      iron: '1%'
    },
    {
      name: 'Eclair',
      calories: 262,
      fat: 16.0,
      carbs: 23,
      protein: 6.0,
      iron: '7%'
    },
     ]
   }
  }
})

感谢帮助人员。谢谢。