类别:uni-app文档

日期:2020-11-21 浏览:1390 评论:0

  基础数据绑定

  变量赋值:

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


本文标题:uni-app 模板语法 - 数据绑定
本文链接:https://vtzw.com/post/446.html
作者授权:除特别说明外,本文由 零一 原创编译并授权 零一的世界 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
 您阅读本篇文章共花了: 

 可能感兴趣的文章

评论区

发表评论 / 取消回复

必填

选填

选填

◎欢迎讨论,请在这里发表您的看法及观点。

最新留言