## 基础数据绑定 ### 变量赋值： ``` <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 会渲染但根据条件决定是否展示。