正文
uni-app - Class 与 Style 绑定
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
参考uni文档：https://uniapp.dcloud.io/use?id=class-%E4%B8%8E-style-%E7%BB%91%E5%AE%9A
参考vue文档：https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F
Class类和Style通过值快速切换
uni官方和vue文档有不明之出，官方已指出
<template>
<view class="content f f-wrap"> <image class="logo" src="../../static/image/myHover.png" @click="tap"></image> <!--
前：样式
后：控制:显示/隐藏
--> <!-- 单类 -->
<view :class="{ active: isActive }">111</view> <!-- 对象 -->
<view class="static" :class="{ active: isActive, 'text-danger': hasError }">222</view> <!-- 数组 -->
<view class="static" :class="[activeClass, errorClass]">333</view> <!-- 条件 -->
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view> <!-- 数组+对象 -->
<view class="static" v-bind:class="[{ activeGrey: isActive }, errorClass]">555</view> <!-- 执行类 -->
<view class="container" :class="computedClassStr"></view>
<view class="container" :class="{activeGrey: isActive}">9999</view> <!-- style支持的类 -->
<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view> </view>
</template> <script> export default {
data() {
return {
title: 'Hello', // 单激活类
isActive: true,
hasError: true, // 多种激活类
activeClass: {
'active': false,
'text-danger': true
},
errorClass: {
'active': true,
'text-danger': false
}, activeColor:true,
fontSize:30
}
},
onLoad() {
this.fetchData()
console.log('页面加载')
},
onShow() {
console.log('页面显示')
},
onReady() {
console.log('页面初次显示')
},
onHide() {
console.log('页面隐藏')
},
onUnload() {
console.log('页面卸载')
},
onBackPress() {
console.log('页面返回...')
},
onShareAppMessage() {
console.log('分享!')
},
onReachBottom() {
console.log('下拉加载...')
},
onPageScroll() {
console.log('页面滚动...')
},
onPullDownRefresh() {
console.log('上拉刷新...')
uni.stopPullDownRefresh();
}, // #ifdef APP-PLUS
onNavigationBarButtonTap() { },
// #endif methods: {
tap(e) {
console.log('tap点击!', e);
},
fetchData() {
console.log('拉取数据...');
},
computedClassStr() {
return this.isActive ? 'actives' : 'active'
}
}
}
</script> <style lang="scss">
.active {
color: #f00;
} .activeGrey {
color: #aaa;
} .text-danger {
color: #f0f;
font-weight: bold;
} .f {
display: flex;
} .f-wrap {
flex-wrap: wrap;
}
</style>
通过模板 （template） 端控制模板
通过控制端 （JS） 来控制行为
通过 （CSS） 显示端进行显示
