vue 自定义按钮样式

Vue.js本身并不是一个CSS库，但它非常灵活，可以让你轻松自定义组件的样式。要在Vue中创建自定义按钮样式，你需要结合HTML、CSS和JavaScript。以下是一个基本的例子：

1. **HTML模板**：

<template>
  <button class="custom-btn" @click="doSomething">{{ buttonText }}</button>
</template>

这里的`.custom-btn`是你自定义的按钮样式类。

2. **CSS样式**：

.custom-btn {
  background-color: #4CAF50; /* 绿色背景 */
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s ease;
}

.custom-btn:hover {
  background-color: #45a049; /* 鼠标悬停效果 */
}

这将创建一个绿色背景、白色文字的按钮，并在鼠标悬停时改变颜色。

3. **JS绑定**：

<script>
export default {
  data() {
    return {
      buttonText: '点击我'
    };
  },
  methods: {
    doSomething() {
      console.log('Button clicked');
    }
  }
};
</script>

在这个例子中，当你点击按钮时，会触发`doSomething`方法并打印一条消息。