微信小程序如何像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 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
JavaScript 判断iPhone X Series机型的方法
Jan 28 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
改进的IP计数器
2006/10/09 PHP
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
关于query Javascript CSS Selector engine
2013/04/12 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
python中pass语句用法实例分析
2015/04/30 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
python设置值及NaN值处理方法
2018/07/03 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
技术人员面试提纲
2013/11/28 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
水果超市创业计划书
2014/01/27 职场文书
幼儿园老师寄语
2014/04/03 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
会计专业求职信范文
2015/03/19 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
比较几种Redis集群方案
2021/06/21 Redis