## 基礎數據綁定 ### 變量賦值： ``` <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 會渲染但根據條件決定是否展示。