uni-app Class与Style绑定

为节约性能，我们将class与style的表达式通过compiler 硬编码到 uni-app中，支持语法和转换效果如下：

class 支持的语法：

<template>
    <view>
        <!--第一种写法-->

         <view :class="[isRed?'red':'green']">
            test
         </view>

        <!--简写法-->
        <view :class="{red:isRed}">
            test
        </view>
    </view>

</template>

<script>
    var _self;
    export default{
        data(){
            return{
                isRed: true
            }
        }
    }
</script>

<style>
    .red{
        color:#DD524D;
    }
    .green{color:#00FF00}
</style>

style支持的语法：

<template>
    <view>
        <view :style="{fontSize:fontSize+'px'}">
            test
        </view>
    </view>
</template>

<script>
    var _self;
    export default{
        data(){
            return{
                fontSize: 100
            }
        }
    }
</script>

<style>
    .red{
        color:#FF0000;
    }
    .green{color:#00FF00}
</style>

动态切换案例

<template>
    <view>
        <view v-for="(item,index) in menus" class="menu" :class="[activeIndex==index?'menuActive':'']" @click="menuClick" :id="index">
            {{item}}
        </view>
    </view>
</template>

<script>
    var _self;
    export default{
        data(){
            return{
                activeIndex:0,
                menus:[
                    '新闻',
                    '汽车',
                    '读书'
                ]
            }
        },
        onLoad() {
            _self=this;
        },
        methods:{
            menuClick:function(e){
                var aId=e.target.id;
                
                _self.activeIndex=aId;
            }
        }
    }
</script>

<style>
.menu{
    padding: 10px;
    float: left;
    margin:5px;
    line-height: 36x;
}
.menuActive{color:#FF0000 !important;}
</style>