一、点击事件控制标签颜色

1、有红、黄、蓝三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <form action="" style="margin: 30px;">
        <p @click="tag" :style="{ w,height: h, backgroundColor: bgc }"></p>
        <input type="button" value="红" @click="tag($event,'red')">
        <input type="button" value="黄" @click="tag($event,'yellow')">
        <input type="button" value="蓝" @click="tag($event,'blue')">
    </form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            h: '200px',
            w: '200px',
            bgc: 'red'
            },
        methods:{
            tag (a,b) {
                this.bgc = b
            }
        }
    })
</script>
</html>

二、实现点击次数，变换页面标签的颜色

2、有一个200x200矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色，依次类推

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <form action="#" style="margin: 30px;">
        <p @click="tag" :style="{ w,height: h, backgroundColor: bgc}"></p>
    </form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let num = 0;
    new Vue({
        el:'#app',
        data:{
            h: '200px',
            w: '200px',
            bgc: 'yellow'
            },
        methods:{
            tag () {
                num += 1;
                if (num==1){
                    this.bgc = 'pink'
                }else {if (num==2){
                    this.bgc = 'green'
                }else {
                    this.bgc = 'cyan';
                    num = 0
                }}
            }
        }
    })
</script>
</html>

三、周期性实现颜色的旋转变色

1、如图：图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成下红上绿，依次类推

2、可以将图编程自动旋转

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <form action="" style="margin: 30px;">
        <p @click="tag" :style="{ w,height: h, background: bgc, borderRadius:rad}"></p>
    </form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let num = 0;
    let app = new Vue({
        el:'#app',
        data:{
            h: '200px',
            w: '200px',
             //实现页面的过度（颜色）
            bgc: 'linear-gradient(to top, red 50%, green 50%)', 
            rad: '50%'
            },
        methods:{
            tag () {
                num += 1;
                if (num==1){
                    // 控制方向
                    this.bgc = 'linear-gradient(to top, red 50%, green 50%)' 
                }else {if (num==2){
                    this.bgc = 'linear-gradient(to left, red 50%, green 50%)'
                }else {if (num==3) {
                    this.bgc = 'linear-gradient(to bottom,red  50%, green 50%)'
                }else {
                    this.bgc = 'linear-gradient(to right, red 50%, green 50%)';
                    num = 0
                }
                }}
            }
        }
    });
    function funcTest(){
    // 按照指定的周期（以毫秒计）来调用函数
    window.setInterval(app.tag,666);  
}
    // 页面加载完直接调用 该方法
    window.onload = funcTest;  
</script>
</html>