<!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>
