微信小程序如何像vue一样在动态绑定类名


Posted in Javascript onApril 17, 2018

小程序 开发中遇到这样一个问题...

排行榜开发的时候,前三名的样式不同,其余的样式一样。但是都是通过同一元素来遍历的,当时卡了一下。后来发现有module模块化这一概念,于是查了下api,一下子就做出来了。

微信小程序如何像vue一样在动态绑定类名 

就是不同名次上边的样式根据实际情况展示效果。

模块化

我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

通俗的将就是自身独立,作用域只作用于该模块,与js互不影响。

主要代码

module部分

<wxs module="rank">
 var indexof = function(index){
 switch(index){
 case 0:
 return 'first-price';
 break;
 case 1: 
 return 'second-price';
 break;
 case 2: 
 return 'third-price';
 break;
 }
 };
 module.exports.style = indexof;
 </wxs>

view

<view class="weui-badge {{rank.style(index)}}">{{index + 1}}</view>

补充:

vue与微信小程序的一些区别

一.条件渲染

vue:使用v-if指令,v-else表示v-if的else块,v-else-if表示v-if 的“else-if 块”

<div v-if="type === 'A'">
  A
 </div>
 <div v-else-if="type === 'B'">
  B
 </div>
 <div v-else-if="type === 'C'">
  C
 </div>
 <div v-else>
  Not A/B/C
 </div>

微信小程序:使用wx:if,wx:else表示wx:if的else块,wx:elif表示wx:if的"else-if"块

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

二.显示隐藏元素

VUE:v-show="..."

微信小程序:hidden="{{...}}"

三.绑定class

vue:全用v-bind,或者简写为:bind,和本有的class分开写

<div class="test" v-bind:class="{ active: isActive }"></div>

微信小程序:

<view class="test {{isActive ? 'active':'' }}"></view>

四.事件处理

VUE:使用v-on:event绑定事件,或者使用@event绑定事件

<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button> //阻止事件冒泡

微信小程序:全用bindtap(bind+event),或者catchtap(catch+event)绑定事件

<button bindtap="clickMe">点击我</button>
<button catchtap="clickMe">点击我</button> //阻止事件冒泡

五.绑定值

VUE:vue动态绑定一个变量的值为元素的某个属性的时候,会在变量前面加上冒号:,例:<img :src="imgSrc"/>

微信小程序:绑定某个变量的值为元素属性时,会用两个大括号括起来。例:<image src="{{imgSrc}}"></image>

六.绑定事件传参

VUE:vue绑定事件的函数传参数时,可以把参数写在函数后面的括号里

<div @click="changeTab(1)">哈哈</div>

微信小程序:微信小程序的事件我试过只能传函数名,至于函数值,可以绑定到元素中,在函数中获取

<view data-tab="1" catchtap="changeTab">哈哈</view>

js:

changeTab(e){
  var _tab = e.currentTarget.dataset.tab; 
}

七.设置值

VUE:设置test的值可以用,this.test = true;获取test的值可以用this.test.

微信小程序:设置test的值要用this.setData({test:true});获取test的值用this.data.test

总结

以上所述是小编给大家介绍的微信小程序如何像vue一样在动态绑定类名 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript UrlDecode函数代码
Jan 09 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
JavaScript函数详解
Feb 27 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
Angular数据绑定机制原理
Apr 17 #Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 #Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 #jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 #jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 #jQuery
Angular 容器部署的方法
Apr 17 #Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 #Javascript
You might like
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
PyTorch预训练的实现
2019/09/18 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
大学生最常用的自我评价
2013/12/07 职场文书
单身联谊活动方案
2014/01/29 职场文书
酒店员工检讨书
2014/02/18 职场文书
春风行动实施方案
2014/03/28 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
python如何进行基准测试
2021/04/26 Python