微信小程序如何像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 克隆数组最简单的方法
Feb 12 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
angular实现form验证实例代码
Jan 17 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 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数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
简述Python中的面向对象编程的概念
2015/04/27 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python实现截屏的函数
2015/07/25 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
python3 kubernetes api的使用示例
2021/01/12 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
护士自我鉴定
2013/10/23 职场文书
函授大专自我鉴定
2013/11/01 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
花木兰观后感
2015/06/10 职场文书
《颐和园》教学反思
2016/02/19 职场文书