//class的动态绑定
<template>
<view>
<view class="static" :class="{ active: isActive}">hello uni-app</view>
</view>
</template>
<script>
export default {
data() {
return {
isActive: true,
}
}
}
</script>
<style>
.active{
background-color: #007AFF;
font-size:30px;
}
</style>
<template>
<view>
<view class="container" :class="computedClassStr">hello uni-app</view>
<view class="container" :class="{active: isActive}">hello uni-app</view>
</view>
</template>
<script>
export default {
data() {
return {
isActive: true
}
},
computed: {
computedClassStr() {
return this.isActive ? 'active' : ''
}
}
}
</script>
<style>
.active {
background-color: #007AFF;
font-size:30px;
}
</style>
//style的动态绑定
<template>
<view :style="{ color: activeColor, fontSize: fontSize + 'px' }">hello uni-app</view>
</template>
<script>
export default {
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
}
</script>
//直接绑定到一个样式对象通常更好,这会让模板更清晰:
<template>
<view :style="styleObject">hello uni-app</view>
</template>
<script>
export default {
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
}
</script>
总结:
class的动态绑定 :class="{ active: isActive}",相当于computed计算属性
computedClassStr() {
return this.isActive ? 'active' : ''
}
style的动态绑定::style="{ color: activeColor, fontSize: fontSize + ‘px’ }",特别需要注意" ’ ’ "相互套用的语法,推荐直接绑定一个对象
:style="styleObject">
<script>
export default {
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
}
</script>