vue写一个 右边是箭头样式的按钮

在Vue中，你可以使用内联样式或者单独的CSS文件来定义右边是箭头样式的按钮。以下是一个使用内联样式的示例：

<template>
  <button class="arrow-button">
    Button
    <span class="arrow"></span>
  </button>
</template>

<style>
.arrow-button {
  position: relative;
  padding: 10px 20px;
  background-color: #f2f2f2;
  border: none;
  outline: none;
  cursor: pointer;
}

.arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  
  /* 定义箭头样式 */
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid black;
}
</style>

在上面的示例中，我们创建了一个按钮，其中包含一个带有箭头样式的`<span>`元素。通过设置按钮的样式和箭头的样式，我们可以实现右边是箭头样式的按钮。