vue怎么在buttun里面加icon

在Vue中，可以使用第三方UI库（如Element UI、Vuetify等）来实现在button中添加icon，也可以使用自定义样式来实现。

使用Element UI的例子： 首先，确保已经安装了Element UI库。 然后，在你的Vue组件中，引入Element UI的button组件和icon组件：

import { Button, Icon } from 'element-ui';

在template中，使用Button组件，并在其中添加Icon组件：

<el-button type="primary" icon="el-icon-search">Search</el-button>

这里的el-icon-search是Element UI提供的一个搜索图标的class名，你可以根据需要使用其他的class名。

使用Vuetify的例子： 首先，确保已经安装了Vuetify库。 然后，在你的Vue组件中，引入Vuetify的button组件和icon组件：

import { VBtn, VIcon } from 'vuetify/lib';

在template中，使用VBtn组件，并在其中添加VIcon组件：

<v-btn icon>
  <v-icon>mdi-magnify</v-icon>
</v-btn>

这里的mdi-magnify是Vuetify提供的一个放大镜图标的class名，你可以根据需要使用其他的class名。

使用自定义样式的例子： 首先，在你的Vue组件中定义一个样式类，并在其中设置背景图片为你想要的icon：

.my-icon {
  background-image: url('path/to/your/icon.png');
  /* 设置宽高和其他样式，以适应你的需求 */
}

在template中，使用button元素，并为其添加样式类：

<button class="my-icon"></button>

这样，你就可以在button中添加自定义的icon了。

以上是几种常见的在Vue中在button中添加icon的方法，你可以根据自己的需求选择适合的方法