<template>
<div>
<!-- v-bind:class 绑定字符串 -->
<button :class="colorClass" >22</button>
<!-- v-bind:class 绑定对象 -->
<button @click="say()" :class="{'red':isRed,'bold':isBold}">111</button>
<!-- 数组形式绑定多个class -->
<button :class="[colorClass,baseClass]" >33</button>
<!-- 数组结合三目运算符绑定class -->
<button :class="[true?colorClass:baseClass]" >33</button>
<!-- 绑定单个style对象 -->
<button :style="styleObject" >33</button>
<!-- 绑定多个style对象 -->
<button :style="[styleObject,baseStyleObject]" >33</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
colorClass:'red',
baseClass:'base',
isRed:true,
isBold:true,
styleObject:{
color:'blue'
},
baseStyleObject:{
width:"50px",
height:"30px"
}
}
}
}
</script>
<style>
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.bold{
font-weight: bold;
}
.base{
width: 100px;
}
</style>
vue 绑定 class 样式类和 style 内联样式
最新推荐文章于 2024-09-11 11:57:35 发布