长春专业做网站公司排名,网站建设方案协议书,成网站建设,小米网站建设项目书wxml
wei xin markup language 类似于html
文档
数据绑定
小程序中使用{{}} 来进行数据绑定到模板中#xff0c;如: wxml中的动态数据全部来自js中的data
简单绑定
//wxml
view {{text }}/view// index.js
Page({data: {text: hello world},
})属性绑定…wxml
wei xin markup language 类似于html
文档
数据绑定
小程序中使用{{}} 来进行数据绑定到模板中如: wxml中的动态数据全部来自js中的data
简单绑定
//wxml
view {{text }}/view// index.js
Page({data: {text: hello world},
})属性绑定(id、class、checked)
view iditem-{{id}} {{text}}/view
view wx:if{{condition}} /view
checkbox checked{{false}} /checkbox属性绑定需要在变量外添加{{}}
运算
!--字符串运算--
view{{hello name}}/viewPage({data:{name: MINA}
})
view hidden{{flag ? true : false}} 三元运算 /view条件判断
wx:if 判断是否渲染该代码块wx:elif 判断是否渲染该代码块wx:else 判断是否渲染该代码块
wx:if VS hidden
wx:if 类似于vue中的v-ifhidden 类似于vue中的v-show 在频繁切换的场景下 推荐使用hidden如果在运行时改变可能不大时使用wx:if
模板
WXML 提供模板template,可以在模板定义代码片段然后在不同的地方引用。
定义模板
template namemsgItemviewtext {{index}}: {{msg}} /texttext Time: {{time}} /text/view
/template使用模板
template ismsgItem data{{...item}}/可以使用is属性来动态决定渲染哪个模板
引入
使用import 可以引入其他wxml文件中的模板、也可以使用include(include 引入的模板只能是静态的) import src./item/importtemplate data{{text: 测试}} isitem/templateimport作用域
引入的模板不支持递归 如C import BB import A在C中可以使用B定义的template在B中可以使用A定义的template但是C不能使用A定义的template。
