微信小程序 动态控制多个class

一  只有两种样式的情况

//使用三目运算符

<view class=" { { true ? 'class1' : 'class2' } } ">   </view>

二  两种以上的情况

方式一：

            //还是跟两种class的情况一样，只需用空格隔开

            <view class=" {{ }}  {{ }}  {{ }}">   </view>

方式二：

            <view class="{{ index==1 ? 'class1' : ' '  || index==2' ? 'index==2 : 'class2' || index==3 ?'class3' : ' ' }}"></view>

   附上一张效果图

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 微信小程序学习日志
    每天的学习记录，可能有的地方写的不对，因为刚学，以后发现错的话会回来改掉整体流程 https://develope...
    有点健忘阅读 4,791评论 0赞 7
  • 源码众享最新教程 - 草稿
    ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程，因...
    小菜c阅读 6,537评论 0赞 17
  • 微信小程序开发(7)：列表页面怎么做
    作者：叶小钗www.cnblogs.com/yexiaochai/p/9431816.html 接上文： 微信小程...
    grain先森阅读 3,002评论 0赞 4
  • 面试题
    前端开发面试题 面试题目： 根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。 题目类型： 理论知...
    怡宝丶阅读 2,609评论 0赞 7
  • 有（爱心）的机器人
    机器人，你们肯定知道，顾名思义，他就是一个用机器做出来的一个人，机器人的品类有很多种，如扫地机器人，救火机...
    帅在阅读 372评论 0赞 4