uni-app学习笔记class和style的动态绑定

//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>