:style中的条件样式逻辑移动到计算属性或者methods

放入methods中的案例：

<template>  
  <div class="app-container">  
    <ul>  
      <li  
        v-for="row in processedRows"  
        :key="row.id"  
        :style="getRowStyle(row)"  
      >  
        {{ row.name }}  
      </li>  
    </ul>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      processedRows: [  
        { name: '张三', id: '11' },  
        { name: '李四', id: '22' },  
        { name: '王五', id: '33' }  
      ]  
    }  
  },  
  methods: {  
    getRowStyle(row) {  
      return {  
        color: row.name === '李四' ? '#ccc' : '#000'  
      };  
    }  
  }  
}  
</script>

放入计算属性要注意什么

计算属性是一个描述符对象，而不是一个方法。因此，你不能像定义方法那样在 computed 对象中定义函数。

在 computed 对象中定义一个接受参数的函数。计算属性不接收参数，它们仅基于组件的现有数据计算返回值。

<template>
  <div class="app-container">
    <ul>
      <li
        v-for="row in processedRows"
        :key="row.id"
        :style="getRowStyle(row.id)"
      >
        {{ rowDisplayName(row.id) }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      processedRows: [
        { name: '张三', id: '11' },
        { name: '李四', id: '22' },
        { name: '王五', id: '33' }
      ]
    }
  },
  computed: {
    // 基于每行的id获取样式
    getRowStyle() {
      return (id) => {
        const row = this.processedRows.find(r => r.id === id)
        return {
          color: row.name === '李四' ? '#ccc' : '#000'
        }
      }
    },
    // 基于每行的id获取显示名称
    rowDisplayName() {
      return (id) => {
        const row = this.processedRows.find(r => r.id === id)
        return row.name === '李四' ? '不知道' : row.name
      }
    }
  }
}
</script>