数据绑定是用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>