红黄蓝
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>红黄蓝</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <style> .box { 200px; height: 200px; background-color: red; } </style> <body> <div id="app"> <p> <button @click="fn('red')">红</button> <button @click="fn('yellow')">黄</button> <button @click="fn('blue')">蓝</button> </p> <div class="box" :style="{backgroundColor: color}"></div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { color: 'red' }, methods: { fn(color) { this.color = color; } } }) </script> </html>
点击变色:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击变色</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <style> .wrap { 200px; height:200px; background-color:red; } </style> <div id="app"> <div class="wrap" :style="{backgroundColor: color}" @click="changeColor"> </div> </div> <body> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ color:'black', count:0, colorArr:['cyan', 'pink', 'green'] }, methods:{ changeColor(){ let n = this.count++; this.color = this.colorArr[n % this.colorArr.length]; } } }) </script> </html>
图片旋转:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片旋转</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <style> .box { 200px; height: 200px; border: 1px solid black; border-radius: 50%; overflow: hidden; position: relative; } .b1 { background-color: red; position: absolute; } .b2 { background-color: green; position: absolute; } .l { 100px; height: 200px; left: 0; } .r { 100px; height: 200px; right: 0; } .t { 200px; height: 100px; top: 0; } .b { 200px; height: 100px; bottom: 0; } </style> <div id="app"> <div class="box" @click="clickAction"> <div class="b1" :class="c1"></div> <div class="b2" :class="c2"></div> </div> </div> <body> </body> <script src="js/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { count: 1, c1: 'l', c2: 'r', c1Arr: ['l', 't', 'r', 'b'], c2Arr: ['r', 'b', 'l', 't'] }, methods: { clickAction() { let n = this.count ++; this.c1 = this.c1Arr[n % 4]; this.c2 = this.c2Arr[n % 4]; } } }); // 利用定时器自动旋转图像 setInterval(function () { app.clickAction(); }, 55) </script> </html>