Vue.js中如何将“查看更多/收起”替换为Vuetify箭头图标？

根据你的Vue（Vuetify）代码，这里提供几种简单的替换方案，适配不同场景：

方案一：使用Vuetify内置图标（推荐，适配项目环境） #

因为你的代码里用到了v-col，说明是Vuetify项目，直接用Vuetify集成的Material Design Icons最适配。修改按钮部分代码即可：

<button class="btn btn-success" @click="readMore = !readMore">
  <v-icon v-if="readMore">mdi-chevron-up</v-icon>
  <v-icon v-else>mdi-chevron-down</v-icon>
</button>

注：如果项目未配置Material Icons，需确保已安装@mdi/font并在Vuetify配置中引入。

方案二：使用HTML实体箭头（无额外依赖） #

直接用HTML内置的箭头字符，无需任何依赖，适合快速替换：

<button class="btn btn-success" @click="readMore = !readMore">
  <span v-if="readMore" style="font-size: 1.2em;">&uarr;</span>
  <span v-else style="font-size: 1.2em;">&darr;</span>
</button>

可以通过style调整箭头大小、颜色等样式。

方案三：CSS伪元素实现（保持HTML简洁） #

通过CSS伪元素动态切换箭头，让HTML结构更干净：

1. 修改按钮的HTML：

<button class="btn btn-success toggle-btn" :class="{ active: readMore }" @click="readMore = !readMore"></button>

2. 添加对应的CSS样式：

.toggle-btn::after {
  content: '\2193'; /* 向下箭头 */
  font-size: 1.2em;
  color: inherit;
}
.toggle-btn.active::after {
  content: '\2191'; /* 向上箭头 */
}

额外修正：原代码的小问题 #

1. 模板里多了一个</v-col>标签，需删除多余的那个；
2. 脚本部分的data写法有误，正确的Vue组件data写法应为：

<script>
export default {
  data() {
    return {
      readMore: false
    }
  }
}
</script>

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