微信小程序如何像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 相关文章推荐
js GridView 实现自动计算操作代码
Mar 25 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
浅析javascript中的DOM
Mar 01 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
Javascript读写cookie的实例源码
Mar 16 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
php实现的在线人员函数库
2008/04/09 PHP
Php注入点构造代码
2008/06/14 PHP
php学习笔记之基础知识
2014/11/08 PHP
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
Javascript Objects详解
2014/09/04 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python实现的HTTP并发测试完整示例
2020/04/23 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
python Kmeans算法原理深入解析
2019/08/23 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
白酒市场开发计划书
2014/01/09 职场文书
任命书怎么写
2014/06/04 职场文书
食品工程专业求职信
2014/06/15 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
校园广播稿范文
2015/08/19 职场文书
感谢信
2019/04/11 职场文书