vue的样式案例教学

Vue.js 的样式通常通过CSS或者预处理器如Sass、Less等来组织和管理。这里有一个简单的例子来展示如何在Vue组件中应用样式：

<!-- 定义一个Vue组件 -->
<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <p>点击按钮改变我的颜色</p>
    <button @click="changeColor">Change Color</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      color: 'blue'
    }
  },
  methods: {
    changeColor() {
      this.color = this.color === 'blue' ? 'red' : 'blue';
    }
  }
}
</script>

<style scoped>
.hello {
  background-color: {{ color }};
  padding: 20px;
}

button {
  margin-top: 10px;
  cursor: pointer;
}
</style>

在这个例子中，我们在`<style>`标签里直接编写了内联CSS，其中`scoped`属性用于限制样式的作用域，只对当前组件生效。数据绑定（`{{ }}`）允许我们将`data`中的值渲染到样式中。

同时，我们在`methods`对象中定义了一个`changeColor`方法，当用户点击按钮时，会触发该方法改变`color`变量，进而更新背景色。