classname.vue 601 B

12345678910111213141516171819202122232425262728293031323334353637
  1. <template>
  2. <recycle-list for="item in longList" switch="type">
  3. <cell-slot case="A" class="cell">
  4. <text :class="['text', item.color]">content</text>
  5. </cell-slot>
  6. </recycle-list>
  7. </template>
  8. <style scoped>
  9. .cell {
  10. background-color: #FF6600;
  11. }
  12. .text {
  13. font-size: 100px;
  14. text-align: center;
  15. }
  16. .red {
  17. color: #FF0000;
  18. }
  19. .blue {
  20. color: #0000FF;
  21. }
  22. </style>
  23. <script>
  24. module.exports = {
  25. data () {
  26. return {
  27. longList: [
  28. { type: 'A', color: 'red' },
  29. { type: 'A', color: 'blue' }
  30. ]
  31. }
  32. }
  33. }
  34. </script>