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 会渲染但根据条件决定是否展示。