数据绑定

143 阅读1分钟

一、函数使用 前端有很多模板引擎 {{msg}} 利用正则表达式来匹配{{XXX}},替换。 ##1、如何修改数据 this.setData({ xxx:xxx}) }

2、循环数据

WX:for=“{{要循环的数据}}” {{item}}//循环的每一项 {{index}}; //循环的下表

3、条件渲染

wx:if="{{真假}}" 在js里面什么是假; false 0 null undefined、NaN、""(空字符串); #条件渲染 添加事件的方法: bindxxx ="函数名"; 警告:需要在循环的过程中添加wx:key,以提高性能。 key的特点是唯一不重复。 hidden=”{{真假}}“ wx:if vs hidden区别: wx:if让元素显示隐藏方法是添加或者删除节点; hidden:显示或者隐藏。 因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。

面试题:border-radius:10px;四个角都是10px; border-radius:10px 20px ;左上右下10px ,右上左下20px; border-radius:10px 20px 30px 40px/30px 10px 20px 20px ;(正方形或者圆从中心分八块);