Uni-App - 模板语法 - 数据绑定

基础数据绑定

变量赋值：

<script>
export default {
 data: {
  title: 'Hello',
  name : 'hcoder'
 }, .....

在视图中使用 {{}} 调用变量：

<template>
 <view class="content">
  <text class="title">{{title}}</text>
  <view>
   hi....{{name}}
  </view>
 </view>
</template>

数组形式的数据绑定

data: {
  students : [
   {name : "张三", age : 18},
   {name : "李四", age : 20}
  ]
 }, 
//调用
<view>
{{students[0]['name']}}
{{students[0].name}}
</view>

列表渲染

<template>
 <view>
  <view v-for="(item, index) in students">
   <view class="persons">{{index}} - {{item.name}}</view>
  </view>
 </view>
</template>
<script>
export default {
 data: {
  students : [
   {name : "张三", age : 18},
   {name : "李四", age : 20}
  ]
 },
 onLoad:function(options){
  console.log("onLoad");
 },
 onHide:function(){
  console.log("onHide");
 },
 onShow:function(){
  console.log("onShow");
 }
}
</script>
<style>
.persons{width:750px; line-height:2.2em;}
</style>

// 说明： 正常展示效果需要删除 app.vue 内的全局样式。

条件渲染

<template>
 <view>
  <view v-for="(item, index) in students">
   <view class="persons">{{index}} - {{item.name}}</view>
  </view>
  <view v-if="show">
   这里是条件展示的内容....
  </view>
 </view>
</template>
<script>
export default {
 data: {
  students : [
   {name : "张三", age : 18},
   {name : "李四", age : 20}
  ],
  show:false
 }

使用 hidden

<template>
 <view>
  <view v-for="(item, index) in students">
   <view class="persons">{{index}} - {{item.name}}</view>
  </view>
  <view v-hidden="show">
   这里是条件展示的内容....
  </view>
 </view>
</template>
<script>
export default {
 data: {
  students : [
   {name : "张三", age : 18},
   {name : "李四", age : 20}
  ],
  show:true
 }

if 与 hidden

if会根据条件决定是否渲染，hidden 会渲染但根据条件决定是否展示。