在Vuejs中设置列表对象中文本的样式部分

<template>
  <div>
    <ul>
      <li :style="{ color: textColor, fontSize: textSize }" v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red',
      textSize: '14px',
      list: ['Item 1', 'Item 2', 'Item 3']
    }
  }
}
</script>

<template>
  <div>
    <ul>
      <li :class="textStyle" v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textStyle: 'text-red',
      list: ['Item 1', 'Item 2', 'Item 3']
    }
  }
}
</script>

<style>
.text-red {
  color: red;
  font-size: 14px;
}
</style>

<template>
  <div>
    <ul>
      <li :style="listItemStyle" v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3']
    }
  },
  computed: {
    listItemStyle() {
      return {
        color: 'red',
        fontSize: '14px'
      }
    }
  }
}
</script>