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


Posted in Javascript onJune 12, 2017

微信小程序点击添加移除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) { 
 
 } 
 
  
})

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

Javascript 相关文章推荐
jquery入门—访问DOM对象方法
Jan 07 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
js实现表格筛选功能
Jan 18 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
详解cordova打包成webapp的方法
Oct 18 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 #Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 #Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 #Javascript
原JS实现banner图的常用功能
Jun 12 #Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 #Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 #Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 #jQuery
You might like
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
python实现简单五子棋游戏
2019/06/18 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
纠纷协议书
2014/04/16 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript