下面,粗略的介绍一下微信小程序的条件渲染、列表渲染、数据绑定等,详细的内容大家可以去看微信小程序的API,在此只做简单描述,希望能帮助到大家
WEBVIEW APP MINA // page.jsPage({ data: { view: 'MINA' }})
block wx:if
block和template差不多,在控制台不可见标签
因为 wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。
view1 view2
注意: <block/>
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
1.{ {item}} //自定义数组循环{ {item}} // page.jsPage({ data: { zero:6, array: [1, 2, 3, 4, 5] }})
2.此处的wx:for-item='newItem'可以不用相当于把item赋给newItem,
不写时下面的newItem.title换成item.title。此处的wx:for-index='id'其实就是每一个item的索引
<view wx:for="{ {newList}}" wx:for-item='newItem' wx:for-index='id' wx:key='{ {id}}'>
<view>{ {id+1}}.{ {newItem.title}}</view>
<view>{ {newItem.content}}</view>
</view>
{ {message}} // page.jsPage({ data: { message: 'Hello MINA!' }})
对象解构:
:
此处的template是虚拟的标签,在控制台的标签元素是看不到的,所以向该标签
内写内容是无法显示的只能通过如下方法用is调用
1.1FirstName: { {firstName}}, LastName: { {lastName}} //表示控制以上name=staffName下的view的视图,其中data调用对象时用三个点表示 // page.jsPage({ data: { staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} }})
1.2//is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板:
odd even
2.
Page({ data: { a: 1, b: 2 } })
最终组合成的对象是 {for: 1, bar: 2}
3. 如果对象的 key 和 value 相同,也可以间接地表达。
Page({ data: { foo: 'my-foo', bar: 'my-bar' } })
最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}