Uni-App - 模板语法 - 数据绑定

基础数据绑定

变量赋值：

<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 - 模板语法 - 数据绑定相关推荐

【微信小程序】WXML模板语法 —— 数据绑定
1.1.数据绑定的基本原则 (1)在data中定义数据 (2)在WXML中使用数据 1.2.在data中定义页面的数据 1.2.1.动态绑定数据 //在页面对应的.js文件中,把数据定义到data对象 ...
【微信小程序】-- WXML 模板语法 - 数据绑定（九）
微信小程序数据绑定与模板语法
微信小程序数据与模板配置总述: 对应的语法格式与vue的语法格式类似 wxml数据绑定 WXML 模板语法 - 数据绑定.数据绑定的基本原则在 data 中定义数据在 WXML 中使用数据在 ...
微信小程序学习day01-WXML 模板语法
目录 WXML 模板语法 - 数据绑定: 1.数据绑定的基本原则 2. 在 data 中定义页面的数据 3. Mustache 语法的格式 4. Mustache 语法的应用场景 5. 动态绑定内容 ...
微信小程序---WXML 模板语法(附带笔记文档)
目录学习文档 WXML模板语法-数据绑定数据绑定基本原则在data中定义页面数据 Mustache语法的格式动态绑定属性三元运算算数运算 WXML模板语法-事件绑定什么是事件小程序中常 ...
微信小程序2（WXML模板语法）
WXML模板语法-数据绑定数据绑定的基本原则在data中定义数据在WXML中使用数据在data中定义数据在页面对应的.js文件中,把数据定义到data对象中即可: Page({data: { ...
uni app页面跳转后，刷新页面参数丢失问题
正常页面路由跳转地址应该是这样的:http://localhost:8080/#/pages/study/hiring?id=1393112968202870785 浏览器刷新之后就编程这样子:htt ...
VUE中的模板语法以及过滤器和双向数据绑定
目录: 1. 模板语法 1.1 插值 1.1.1 文本 1.1.2 html 1.1.3 属性 1.1.4 表达式 1.2 指令 1.2.1 核心指令 1.2.1.1 v-if |v-else-if| ...
从零开始的Django框架入门到实战教程(内含实战实例) - 01 创建项目与app、加入静态文件、模板语法介绍（学习笔记）
目录 1. 安装Django 2. 创建项目(startproject) 2.1 创建项目 2.2 介绍项目文件 2.3 APP(startapp) 3. 走通流程(urls, views, runs ...

Uni-App - 模板语法 - 数据绑定

基础数据绑定

数组形式的数据绑定

列表渲染

条件渲染

使用 hidden

if 与 hidden

Uni-App - 模板语法 - 数据绑定相关推荐

最新文章

热门文章