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