微信小程序如何像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 相关文章推荐
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
js实现简单抽奖功能
Nov 24 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
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导出oracle库的php代码
2009/04/20 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
Python描述器descriptor详解
2015/02/03 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python openssl模块安装及用法
2020/12/06 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
幼儿园六一儿童节活动总结
2015/02/10 职场文书
成人成长感言如何写?
2019/08/16 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
python编程实现清理微信重复缓存文件
2021/11/01 Python
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android