第一种：两种不同状态切换显示，在class属性中使用三目运算符动态选择Class属性即可 第二种：两种以上状态切换显示，在style属性或者class属性中调用方法返回不同值来实现

第一种：两种不同状态切换显示，在class属性中使用三目运算符动态选择Class属性即可

在wxss中定义被点击和未被点击的样式，如下：

[css]  view plain  copy

1. .is_checked{  
2.   color: #FE0002 ;  
3.   background: #fff;  
4. }  
5. .normal{  
6.   color: #333;  
7.   background: #F0F1EC;  
8. }  

依然是在wxml文件中进行数据绑定：

[html]  view plain  copy

1. <view class="{{isChecked?'is_checked':'normal'}}" bindtap="serviceSelection"></view>  

第二种：两种以上状态切换显示，在style属性或者class属性中调用方法返回不同值来实现

情况A:在wxs文件里面封装一个函数,函数名为selectStatus，参数是后台返回的状态码数值，return 一个对象（本例包含x和y两个属性，代表不同的 文字以及颜色色号）当后台返回的状态status 为 0,1 ，2，3 时。返回不同的颜色和文字即可

[html]  view plain  copy

1. <wxs src='../../utils/filter.wxs' module='filters' />  
2. <text class='status' style='color:{{filters.selectStatus(item.status).y}}'>{{filters.status(item.status).x}}</text>  

情况B:通过调用方法wxs文件定义好的方法动态返回合适的class选择器属性值，从而改变页面显示效果

<!-- 引入wxs，并设置module名 -->

<wxs src="../../src/wxs/common.wxs" module="util" />

<!-- 通过检测邮箱是否有效，来设置相应的class，再在wxss中写好相应的样式 -->

<input class="email_input {{util.validateEmail(email)?'':'error'}}" placeholder='请输入' value='{{email}}' bindinput='emailInput'> </input>

PS:我们第二种实现基于微信小程序新功能WXS（2017.08.30新增）

• WXS增强了wxml的功能，相当于页面中的脚本语言，我们可以将比如检查手机格式的函数放在wxs中来使用（根据是否正确来改变相应的样式），而不用跑到在js中去检查。wxs目前似乎并不支持ES6（至少let不能使用）wxs文件不能被js文件引用。wxs文件能引用wxs文件。