微信小程序实现点击添加移除class

更新时间：2017年06月12日 10:25:50 投稿：lqh

这篇文章主要介绍了微信小程序实现点击添加移除class的相关资料,需要的朋友可以参考下

微信小程序点击添加移除class类实现动态变化class

wxml：

<view class="location_bottom" hidden="" > 
   <view class="{{_num == 1?'add_citying':'add_city'}}" data-num = "1" bindtap="clickNum">北京</view> 
   <view class="{{_num == 2?'add_citying':'add_city'}}" data-num = "2" bindtap="clickNum">上海</view> 
 </view>

wxss:

.location_bottom{height: 140rpx;line-height: 140rpx;color: #d91f16;font-size:
 28rpx;border-top: 2rpx #ebebeb solid; border-bottom: 2rpx #ebebeb solid; padding: 0 20rpx; align-items: center;display: -webkit-flex;}

.add_city{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx 
solid #ebebeb; color: #000000;margin-right: 20rpx; } 
.add_citying{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center;
 border: 2rpx solid #09bb07; color: #09bb07;margin-right: 20rpx;}

js:

Page({ 
 data: { 
  _num: 0,   
 }, 
 clickNum: function (e) { 
  console.log(e.target.dataset.num) 
  this.setData({ 
   _num: e.target.dataset.num 
  }) 
 }, 
 onLoad: function (options) { 
 
 } 
 
  
})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

async-await消灭异步回调实例详解
这篇文章主要为大家介绍了async-await消灭异步回调实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
微信小程序聊天室简单实现
这篇文章主要介绍了微信小程序聊天室简单实现的相关资料,需要的朋友可以参考下
2017-04-04
微信小程序 switch组件详解及简单实例
这篇文章主要介绍了微信小程序 switch组件详解及简单实例的相关资料,需要的朋友可以参考下
2017-01-01
微信小程序 form组件详解及简单实例
这篇文章主要介绍了微信小程序 form组件详解及简单实例的相关资料,需要的朋友可以参考下
2017-01-01
js前端架构Git commit提交规范
这篇文章主要为大家介绍了前端架构Git commit提交规范示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
微信小程序 Button 组件详解及简单实例
这篇文章主要介绍了微信小程序 Button 组件详解及简单实例的相关资料,需要的朋友可以参考下
2017-01-01
本地搭建微信小程序服务器的实现方法
这篇文章主要介绍了本地搭建微信小程序服务器的实现方法的相关资料,希望通过本文能帮助到大家，让大家轻松的搭建自己的微信小程序的服务器，需要的朋友可以参考下
2017-10-10
微信小程序 http请求详细介绍
这篇文章主要介绍了微信小程序 http请求详细介绍的相关资料,需要的朋友可以参考下
2016-10-10
JavaScript history 对象详解
这篇文章主要介绍了JavaScript history 对象详解，history 对象表示当前窗口首次使用以来用户的导航历史记录。因为 history 是 window 的属性，所以每个 window 都有自己的 history 对象，更多详细内容请参考下面文章内容
2021-11-11
微信小程序 Flex布局详解
这篇文章主要介绍了微信小程序 Flex布局详解的相关资料,需要的朋友可以参考下
2016-10-10