亲们先看效果:
html部分代码
<div class="app">
<p :class="{tabcolor:color}">{
{str}}</p>
<button @click="play">开始</button>
<button @click="stop">停止</button>
</div>
注意: :class="{tabcolor:color}" 是给<p></p>标签内的文字加上一个颜色,当我们点击开始按钮的时候。
CSS部分代码
.tabcolor {
color: cornflowerblue;
}
CSS部分的代码很简单,就是给了一个添加颜色的类。
Vue部分代码
Vue.createApp({
data() {
return {
str: "你好啊,我是稳重聪头~",
id: null,
color: false,
}
},
methods: {
play() {
clearInterval(this.id);
this.color = !this.color;
this.id = setInt