目录
一、官方文档
1、地址
2、内容
用在组件上：
二、应用
1、默认实现
代码：
运行结果：
2、绑定Class
代码：
运行结果：
3、条件绑定Class（选择）
代码：
运行结果：
4、条件绑定Class（是否绑定）
代码：
运行结果：
5、绑定Style（与Class类似）
代码：
运行结果：
一、官方文档
1、地址
https://uniapp.dcloud.net.cn/use?id=class-%e4%b8%8e-style-%e7%bb%91%e5%ae%9a
2、内容
此外还可以用 computed 方法生成 class 或者 style 字符串，插入到页面中，举例说明：
<template>
<!-- 支持 -->
<view class="container" :class="computedClassStr"></view>
<view class="container" :class="{active: isActive}"></view>
<!-- 不支持 -->
<view class="container" :class="computedClassObject"></view>
</template>
<script>
export default {
data () {
return {
isActive: true
}
},
computed: {
computedClassStr () {
return this.isActive ? 'active' : ''
},
computedClassObject () {
return { active: this.isActive }
}
}
}
</script>
用在组件上：
非H5端（非自定义组件编译模式）暂不支持在自定义组件上使用 Class与 Style 绑定；
二、应用
1、默认实现
代码：
<template>
<view>
<view class="box">
圆
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
},
}
</script>
<style>
.box{
background: #007AFF;
color: #FFFFFF;
height: 350upx;
width: 350upx;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 50upx;
}
</style>
运行结果：
2、绑定Class
代码：
<template>
<view>
<!-- 注意两个c1一个是class，一个是变量名 -->
<view class="box" :class="['c1','c2',c1]">
圆
</view>
</view>
</template>
<script>
export default {
data() {
return {
c1 : "c3",
}
},
methods: {
},
}
</script>
<style>
.box{
background: #007AFF;
color: #FFFFFF;
height: 350upx;
width: 350upx;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 50upx;
}
.c1{
border: #FF3333 10upx solid;
}
.c2{
font-size: 180upx;
}
.c3{
background: #1AAD19;
}
</style>
运行结果：
（我们呢可以看到c1 c2 c3都生效了）
3、条件绑定Class（选择）
代码：
<template>
<view>
<!-- 注意两个c1一个是class，一个是变量名 -->
<!-- 注意这个三元运算符age>5?c1:c2 -->
<view class="box" :class="['c1','c2',age>15?c1:c2]">
圆
</view>
</view>
</template>
<script>
export default {
data() {
return {
c1 : "c3",
c2 : "c4",
age : 10,
}
},
methods: {
},
}
</script>
<style>
.box{
background: #007AFF;
color: #FFFFFF;
height: 350upx;
width: 350upx;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 50upx;
}
.c1{
border: #FF3333 10upx solid;
}
.c2{
font-size: 180upx;
}
.c3{
background: #1AAD19;
}
.c4{
background: #E80080;
}
</style>
运行结果：
4、条件绑定Class（是否绑定）
代码：
<template>
<view>
<!-- 注意这是大括号 -->
<!-- 意思是如果isActive是true就绑定c1 -->
<view class="box" :class="{'c1' : isActive}">
圆
</view>
</view>
</template>
<script>
export default {
data() {
return {
isActive : true,
}
},
methods: {
},
}
</script>
<style>
.box{
background: #007AFF;
color: #FFFFFF;
height: 350upx;
width: 350upx;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 50upx;
}
.c1{
border: #FF3333 10upx solid;
}
</style>
运行结果：
5、绑定Style（与Class类似）
代码：
<template>
<view>
<!-- 注意这是大括号 -->
<!-- 意思是如果isActive是true就绑定c1 -->
<view class="box" :class="{'c1' : isActive}" :style="{'color' : color}">
圆
</view>
</view>
</template>
<script>
export default {
data() {
return {
isActive : true,
color : "#FF0000"
}
},
methods: {
},
}
</script>
<style>
.box{
background: #007AFF;
color: #FFFFFF;
height: 350upx;
width: 350upx;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 50upx;
}
.c1{
border: #FF3333 10upx solid;
}
</style>
运行结果：
