## 基礎數據綁定
### 變量賦值:
```
<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 會渲染但根據條件決定是否展示。
- 第1講 : 創建項目、部署 VUE 、入口頁面布局
- 第2講,快速開始第一個項目
- 第3講 : uni-app 開發規范及目錄結構
- 第4講 : uni-app 頁面樣式與布局
- 第5講 : uni-app 配置文件 - pages.json
- 第6講 : 配置文件 - manifest.json
- 第7講 : uni-app 頁面生命周期
- 第8講 : uni-app 模板語法 - 數據綁定
- 第9講Class 與 Style 綁定 (動態菜單激活示例)
- 第10講 : uni-app 事件處理、事件綁定、事件傳參
- 第11講 : uni-app 組件 - 基礎組件
- 第12講 : uni-app 組件 - 表單組件
- 第13講 : uni-app 組件 - navigator(導航)及頁
- 第14講 : uni-app 組件 - 媒體組件
- 第15講 : uni-app 組件 - 地圖組件
- 第16講 : uni-app 接口 - 網絡請求
- 第17講 : uni-app 接口 - 從本地相冊選擇圖片或使
- 第18講 : uni-app 上傳(圖片上傳實戰)
- 第19講 : uni-app 接口 - 數據緩存
- 第20講 : uni-app 設備相關
- 第21講 : uni-app 交互反饋
- 第22講 : uni-app 設置導航條
- 第23講 : uni-app 導航(頁面流轉)
- 第24講 : uni-app 下拉刷新
- 第25講 : uni-app 上拉加載更多
- 第26講 : uni-app 第三方登錄(小程序篇)
- 第27講 : uni-app 登錄(h5+ app 篇)
- 第28講 : 自定義組件創建及使用