vue class和style的动态绑定举例
概述
此文章依据官网进行自我整理总结,便于工作中进行直接代码复用。
class的绑定
对象语法
可以用于通过变量来控制class添加与否
<div :class="{active: isActive,‘bigFz’:isBigFz}">
isActive 为true时添加
数组语法
可以用于添加多个动态class,也可以通过三目来控制某个class,实际中使用对象形式
<div :class="[{active: isActive,bigFz:isBigFz},‘bold’]">
style的绑定
对象语法
可以同时添加多个属性进行控制,可以添加动态数字变量
<div :style="{ color: activeColor, fontSize: fontSize + ‘px’ }">
<div :style="{transform:‘rotate(’+rotate+‘deg)’}">
注:此处对象不支持es6 ${}
语法,只能字符拼接,可以在计算属性中使用es6的拼接语法,可参考后面数组语法示例
数组语法
可以同时添加多个属性组进行控制,
其实就是把多个对象属性放到一起
<div :style="[styleObject,styleObject2,styleObject3]">
styleObject(){
return `transform:rotate(${this.rotate}deg)`
},
styleObject2(){
return `transform:rotate(${this.rotate}deg)`
}
styleObject3(){
return `transform:rotate(${this.rotate}deg)`
}
完整demo
<template>
<div class="style">
<h1>vue动态绑定style和class举例</h1>
<h2>class</h2>
<div class="card">
<h3>对象语法:属性控制class添加,可以控制多个</h3>
<p class='title'>用途说明:可以用于通过变量来控制class添加和去除</p>
<code><div :class="{active: isActive,'bigFz':isBigFz}"></code>
<p class='title'>用法优化:也可以把对象单独提炼出来,写到计算属性里,不必写到行内</p>
<code><:class="classObject"></code>
<div :class="{active: isActive,'bigFz':isBigFz}">
<span @click="isActive=!isActive" class="hand">【点击切换颜色】</span>
<span @click="isBigFz=!isBigFz" class="hand">【点击切换字体大小】</span>
</div>
<div :class="classObject">
<span @click="isActive=!isActive" class="hand">【点击切换颜色】</span>
<span @click="isBigFz=!isBigFz" class="hand">【点击切换字体大小】</span>
</div>
</div>
<div class="card">
<h3>数组语法:可以添加多个</h3>
<p class='title'>用途说明:可以用于添加多个动态class,也可以通过三目来控制某个class,</p>
<code><div :class="[isActive?'active':'' ,isBigFz?'bigFz':'']"></code>
<p class='title'>三目比较繁琐时,可以使用数组套对象的方式</p>
<code><div :class="[{active: isActive,'bigFz':isBigFz},'bold']"></code>
<div :class="[isActive?'active':'' ,isBigFz?'bigFz':'']">
<span @click="isActive=!isActive" class="hand">【点击切换颜色】</span>
<span @click="isBigFz=!isBigFz" class="hand">【点击切换字体大小】</span>
</div>
<div :class="[{active: isActive,'bigFz':isBigFz},'bold']">
<span @click="isActive=!isActive" class="hand">【点击切换颜色】</span>
<span @click="isBigFz=!isBigFz" class="hand">【点击切换字体大小】</span>
</div>
</div>
<hr>
<h2>style</h2>
<div class="card">
<h3>对象语法:可以同时添加多个属性进行控制,可以添加动态数字变量</h3>
<code><div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></code>
<p class="title">旋转属性的写法一:行内写法</p>
<p><code><div :style="{transform:'rotate('+rotate+'deg)'}"></code></p>
<p class="title">旋转属性的写法二:使用对象变量+计算属性</p>
<code>
<p><div :style="styleObject"></p>
styleObject(){
return `transform:rotate(${this.rotate}deg)`
}
</code>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
<input type="number" v-model='fontSize' style="width:100px">
这里是显示文字
</div>
<div>
输入不同角度进行旋转
<input type="number" v-model='rotate' style="width:100px" step="5">
<p :style="styleObject" style="border:1px solid #f00;width:100px;height:40px"></p>
</div>
<!-- <div :style="{transform:'rotate('+rotate+'deg)'}" style="border:1px solid #f00;width:350px">
<input type="number" v-model='rotate' style="width:100px" step="5">
输入不同角度进行旋转进行旋转
</div> -->
<h3>数组语法:可以同时添加多个属性组进行控制</h3>
<p>用法说明:其实就是把多个对象属性放到一起</p>
<code>
<p><div :style="[styleObject,styleObject2,styleObject3]"></p>
<p>styleObject(){
return `transform:rotate(${this.rotate}deg)`
},</p>
<p>styleObject2(){
return `transform:rotate(${this.rotate}deg)`
}</p>
<p>styleObject3(){
return `transform:rotate(${this.rotate}deg)`
}</p>
</code>
</div>
</div>
</template>
<script>
export default {
computed: {
classObject: function () {
return {
active: this.isActive ,
bigFz: this.bigFz,
}
},
styleObject(){
return `transform:rotate(${this.rotate}deg)`
}
},
data() {
return {
isActive: false,
isBigFz: false,
objClass: {
active: this.isActive,
'bigFz': this.bigFz
},
activeColor: 'red',
fontSize: 20,
rotate:10
}
},
}
</script>
<style lang="scss" scoped>
.style {
padding: 50px;
margin-bottom: 200px;
.title{
font-weight: bold;
color:#e37474;
}
.active {
font-weight: bold;
color: #f00;
}
.bigFz {
font-size: 20px;
}
.bold{
font-weight: bold;
}
}
.hand {
cursor: pointer
}
.card {
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px
}
</style>