Vuejs中如何根据v-for循环内函数返回值动态修改按钮的class或样式

实现方法 #

完全可以实现，借助Vue的动态类名绑定语法即可完成，根据你的函数返回值类型有两种常用写法： #

1. 对象语法（适用返回值为布尔值的场景） #

如果markIfThisDateHaveItems返回的是true/false判断结果，直接用:class的对象写法，类名作为键，判断条件作为值：

<v-btn 
  v-for="(myDate, idx) in dateRange"  
  :key="idx"
  class="ma-2"
  :class="{ 'has-item': markIfThisDateHaveItems(myDate) }"
  outlined
  color="indigo"
>  
  {{myDate.toLocaleDateString("en-US")}} - ({{markIfThisDateHaveItems(myDate)}})
</v-btn>

提前定义对应类名的样式即可，示例：

/* 有数据的按钮样式 */
.has-item {
  background: #ffedd5 !important;
  border-color: #f97316 !important;
}

2. 字符串拼接语法（适用返回值为多状态的场景） #

如果markIfThisDateHaveItems返回的是数字、字符串等多种状态标识，可以直接把返回值拼接到类名里，匹配不同状态的样式：

<v-btn 
  v-for="(myDate, idx) in dateRange"  
  :key="idx"
  class="ma-2"
  :class="`date-mark-${markIfThisDateHaveItems(myDate)}`"
  outlined
  color="indigo"
>  
  {{myDate.toLocaleDateString("en-US")}} - ({{markIfThisDateHaveItems(myDate)}})
</v-btn>

之后定义date-mark-0、date-mark-1等对应状态的样式即可。 #

性能优化提示 #

当前模板里同一个函数执行了两次，你可以提前把循环项处理成包含标记结果的对象，避免重复计算：

<v-btn 
  v-for="(item, idx) in dateRange.map(date => ({ date, mark: markIfThisDateHaveItems(date) }))"  
  :key="idx"
  class="ma-2"
  :class="{ 'has-item': item.mark }"
  outlined
  color="indigo"
>  
  {{item.date.toLocaleDateString("en-US")}} - ({{item.mark}})
</v-btn>

内容的提问来源于stack exchange，提问作者salahaddin