数据绑定是用template7,官网,framework7内置template7,不用单独下载,下面介绍一些简单的绑定
当你的数据是个数组
return{ data:function(){ let item=[ {name:"jack",age:"18"}, {name:"tom",age:"19"} ] return { data:item, sex:"男" } } }
{{#each data}} //data是个数组 ,用 #each <div>Name:{{name}},Age:{{age}}</div> <span>{{../sex}}</span> //sex不是data的子集,要从#each外部取,所以要用 ../sex ,如果#each外部还有父级 ,则用 ../../sex {{/each}
当你的数据是个object
return{ data:function(){ let item={ name:"jack", age:18, } return { data:item } } }
<div>{{data.name}},{{data.age}}</div>
或者不管是数组还是对象,都可以这样
return{ data:function(){ let people=[ { name: 'John Doe', age: 18 }, { name: 'Mark Johnson', age: 21 } ]; let props={ power: '150 hp', speed: '200 km/h', }; return { peoples:people, props:props } }
{{#peoples}} <div>{{name}},{{age}}</div> {{/peoples}} {{#props}} {{power}},{{speed}} {{/props}}
当你的数据是从服务器获取时,上一章讲过我们用$setState,
如果你要绑定的数据是object,并且层级很多的话,需要这样写
return{ data:function(){ return { data:{}, obj:{ //为了避免报undefined,要把数据结构写上 a:{ b:{ cc:"" } } } } }, on:{ pageInit:function(){ let item={ name:"jack", age:18 };
let item2={ a:{ b:{ name:"tom" } } } this.$setState({
data:item,
obj:item2
}); } }
<div> {{data.name}},{{data.age}} </div> <div>{{obj.a.b.name}}</div>
有时候可能需要对数据进行判断,
<template> <div class="page"> {{#if data.flag}} //if能做true或false判断 <div>{{text}}</div> {{else}} <div>False</div> {{/if}} </div> </template> <script> return{ data:function(){ let item={ flag:true }; return { data:item, text:"True" } } } </script>
当你要做些复杂判断,比如表达式的值不是true或者false的时候,就要用 js_if
<template> <div class="page"> {{#data}} {{#js_if "this.age>=18"}} //注意用 " " 包起来 this是 对当前上下文的引用 成年{{sex}} {{else}} 未成年{{sex}} {{/js_if}} {{/data}} </div> </template> <script> return{ data:function(){ let item={ age:18, sex:"男" }; return { data:item, } } } </script>
有时候可能要对数据进行处理再显示
<template> <div class="page"> {{#data}} {{js "this.price*1.2"}} //注意用 "" 包起来 {{js "this.buy?'买':'不买' "}} {{/data}} </div> </template> <script> return{ data:function(){ let item={ price:100, buy:true }; return { data:item, } } } </script>