<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>vue 数组控制 CSS</title> <style> div.pan { text-align: center; margin: 10px 0px; } div.showCSS { display: inline-block; height: 60px; width: 200px; vertical-align: middle; background-color: #f0f0f0; /* 变换启用过度 */ transition: transform 2s linear; } div.cssblue { background-color: blue; } div.cssborder { border: red solid 2px; } /* 倾斜 */ div.cssskew { transform: skew(30deg,10deg); } /* 旋转 */ div.cssrotate { transform: rotateX(360deg); } div.ctrbutton { display: inline-block; min-height: 10px; vertical-align: middle; user-select: none; border: black solid 2px; border-radius: 4px; padding: 4px; } div.ctrbutton:hover { cursor: pointer; background-color: rgb(207, 209, 211); padding: 6px; } </style> </head> <body> <div id="app"> <div class="pan">vue 数组控制 CSS</div> <div class="pan"> <!-- 数组控制 CSS 样式的展示 --> <div class="showCSS" v-bind:class="[cssblue,cssborder,cssskew,cssrotate]"></div> </div> <div class="pan"> <div class="ctrbutton" @click="Oncssblue">蓝底</div> <div class="ctrbutton" @click="Oncssborder">红边</div> <div class="ctrbutton" @click="Oncssskew">倾斜</div> <div class="ctrbutton" @click="Oncssrotate">旋转</div> </div> </div> </body> <script> var vm = new Vue( { el: '#app', data: { cssblue: null, cssborder: null, cssskew: null, cssrotate:null }, methods: { Oncssblue() { console.log('切换蓝底') if (this.cssblue) { this.cssblue = null } else { this.cssblue = 'cssblue' } }, Oncssborder() { console.log('切换红边') if (this.cssborder) { this.cssborder = null } else { this.cssborder = 'cssborder' } }, Oncssskew() { console.log('切换倾斜') this.cssrotate = null if (this.cssskew) { this.cssskew = null } else { this.cssskew = 'cssskew' } }, Oncssrotate() { console.log('切换旋转') this.cssskew = null if (this.cssrotate) { this.cssrotate = null } else { this.cssrotate = 'cssrotate' } } }, } ) </script> </html>