摘要:小程序实现点击切换样式功能的方式：数据绑定+data去更改标签类名。

普通的web开发可以通过JavaScript获取HTML的Dom结构，再通过Dom对象控制点击事件，但是小程序做不到，由于不是基于web的开发小程序不具备Dom对象。小程序实现点击切换样式功能的方式：数据绑定+data去更改标签类名。

首先需给选定的标志{{}} & data-num，此处只绑定了一个类名，也可以绑定多个类名。以汽油举例：

绑定一个事件 可以给外面的块绑定，也可以给每一个里边的view绑定。

唯一的区别是给事件传入的e不同。绑定在外面的块的事件的e,只有 target才会有dataset的值。绑定给每一个小块的事件的e,不管是 target还是currentTarget都会有dataset的值。

写好初始值。一开始选定哪一个，就给判断的那个变量哪个值，如选择num=1：

data: {

num:1

},

事件处理函数

changeO:function(e){

console.log(e);

this.setData({

num:e.target.dataset.num

})

}

原理是改变一下用来判断的那个变量num的值。除此之外还有三种较常规做法：

通过修改类名 view class={{className}}

添加一个类名，覆盖前面的样式 view class=helplist {{cur}}

修改行内样式，覆盖前面的样式 view class=helplist style={{currentStyle}}

点击样式改变可以提高用户体验，但从小程序的特点出发，使用修改行内样式覆盖由于改动了样式可能会影响小程序的渲染速度，从实现目的来说修改和添加类名覆盖可以避免影响小程序的性能。

推荐阅读：如何在本地提取微信小程序数据

微信小程序测评