Vue绑定class和绑定内联样式的实现方法
时间：2022-09-22 10:39:58|栏目：vue|点击： 次
绑定class
方式一：
对象语法：给 v-bind:class传 一个对象，以动态地切换 class
当对象中某key对应的值为true时，该key做为className被添加到标签上
.box {
width: 100px;
height: 100px;
background-color: gray;
}
.circle {
border-radius: 50%;
}
<div id="app">
<div class="box" @click="isCircle = !isCircle" :class="{circle:isCircle}"></div>
<!--当isCircle为true时，该div的class名多加一个circle-->
<p>{{isCircle}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
isCircle: false
}
})
</script>
初始化时box为方形，点击时切换成圆形，再次点击，切换成方形，以此类推
:class="{circle:isCircle}"还可以写到计算属性computed里，return这个对象
<div class="box" @click="isCircle = !isCircle" :class="divChange"></div>
computed:{
divChange:function(){
return {circle:this.isCircle}
}
}
方式二：
数组语法：把一个数组传给 v-bind:class，以应用一个 class 列表
css多加一个蓝色背景的效果：
.blue {
background-color: blue;
}
<div id="app">
<div class="box" v-on:click="clickFun()" :class="[color,divChange()]"></div>
<p>{{isCircle}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
isCircle: false,
color:""
},
methods:{
divChange: function(){
return {circle:this.isCircle}
},
clickFun: function(){
this.isCircle = !this.isCircle;
if (this.isCircle){
this.color = "blue"
}else{
this.color = ""
}
}
}
})
</script>
绑定内联样式
绑定内联样式同样可以用对象语法或数组语法，此处用对象语法和计算属性结合的方法实例：
<div id="app">
<!--绑定内联样式-->
<div class="box" v-on:click="clickFun()" :style="divStyle"></div>
<p>{{isCircle}}</p>
</div>
divStyle：
divStyle: function(){
return {
backgroundColor:this.color
}
}
这样就可以将想要的颜色设置到.box上了
小demo：
1.点击box时，切换圆形和方形 ——内联样式绑定
2.初始box颜色为红色，点击开始按钮，每隔一秒切换颜色（红/蓝），再次点击按钮后取消颜色切换 —— class绑定
.box {
width: 100px;
height: 100px;
background-color: red;
}
.blue {
background-color: blue;
}
<div id="app">
<div class="box" :style="borderRadius" @click="changeStyle" :class="{blue: isBlue}"></div>
<button @click="startClick">开始</button>
</div>
new Vue({
el: "#app",
data: {
isCircle: false,
borderRadius: { borderRadius: "50%" },
isStart: false,
isBlue: false,
timer: null
},
methods: {
changeStyle: function () {
if (this.borderRadius.borderRadius == "0%") {
this.borderRadius.borderRadius = "50%"
} else {
this.borderRadius.borderRadius = "0%"
}
},
startClick: function () {
this.isStart = !this.isStart;
}
},
watch: {
isStart: function (val) {
var vm = this;
if (val) {
console.log("开启颜色切换")
this.timer = setInterval(function () {
vm.isBlue = !vm.isBlue
}, 1000)
}else{
console.log("取消计时器，停止颜色切换")
clearInterval(this.timer);
this.timer = null;
}
}
}
})
效果：
