微信小程序开发--数据绑定
一、单项数据绑定
<!-- index.wxml -->
<view class="container">
<form>
<input value="{{msg}}" bindinput='inputData' />
<text>{{msg}}</text>
</form>
</view>
//index.js
Page({
data: {
msg:"initial"
},
inputData:function(e){
this.setData({
msg:e.detail.value
})
}
})
二、登录注册案例(1)
<view class="container">
<view class="header">
<image src="../images/logo.png"></image>
</view>
<view class="inputs">
<input
class="username"
placeholder='请输入用户名'
value="{{username}}"
bindinput='inputChange'
data-prop="username">
</input>
<input
class="password"
type="password"
placeholder='请输入密码'
value="{{password}}"
bindinput='inputChange'
data-prop="password">
</input>
</view>
<view class="buttons">
<button type="primary" bindtap='login'>登录</button>
<button type="default">注册</button>
</view>
</view>
//index.js
Page({
data: {
// msg: "initial",
username: "",
password: ""
},
inputData: function(e) {
this.setData({
msg: e.detail.value
})
}, // userNameChange: function(e) {
// this.setData({
// username: e.detail.value
// })
// },
// passwordChange: function(e) {
// this.setData({
// password: e.detail.value
// })
// }, //封装函数
inputChange: function(e) {
var prop = e.target.dataset['prop']
var changed = {}
changed[prop] = e.detail.value
this.setData(changed)
}, // 点击按钮之后处理事件的函数
login: function() {
console.log(this.data)
}
})
/**index.wxss**/
.header image{width: 50px;height: 50px;margin-bottom: 120px}
.inputs input{border:solid 1px silver;width: 260px;height:40px;padding-left:10px;}
.buttons{margin-top:50px;}
.buttons button{width:260px;}
登录注册案例(2)
<!-- index.wxml -->
<form bindsubmit='login'>
<view class="container">
<view class="header">
<image src="../images/logo.png" mode="aspectFit"></image>
</view>
<view class="inputs">
<input
class="username"
placeholder='请输入用户名'
name="username"
value="{{username}}">
</input>
<input
class="password"
type="password"
placeholder='请输入密码'
name="password"
value="{{password}}">
</input>
</view>
<view class="buttons">
<button type="primary" form-type="submit">登录</button>
<button type="default">注册</button>
</view>
</view>
</form>
//index.js
//用from表单实现登录界面功能
Page({
data: {
username: "admin",
password: ""
},
// 点击按钮之后处理事件的函数
login: function(e) {
console.log(e)
}
})
三、条件渲染
(1)、wx:if
<!-- index.wxml -->
<view class="container">
<view class="header" bindtap='change'>
<text>点击切换内容</text>
</view>
<view wx:if="{{!show}}">
<text>
这是内容。。。
这是内容。。。
这是内容。。。
这是内容。。。
</text>
</view>
</view>
//index.js
Page({
data: {
show:"false"
},
change:function(){
this.setData({show:!this.data.show})
}
})
(2)、block wx:if
<view class="container">
<view class="header" bindtap='change'>
<text>点击切换内容</text>
</view>
<block wx:if="{{!show}}">
<view>
<text>
这是内容。。。
这是内容。。。
这是内容。。。
这是内容。。。
</text>
</view>
<view>
<text>
这是内容。。。
这是内容。。。
这是内容。。。
这是内容。。。
</text>
</view>
</block>
</view>
(2)、hidden
<view class="container">
<view class="header" bindtap='change'>
<text>点击切换内容</text>
</view>
<view hidden="{{!show}}">
<text>
这是内容。。。
这是内容。。。
这是内容。。。
这是内容。。。
</text>
</view>
<view hidden="{{!show}}">
<text>
这是内容。。。
这是内容。。。
这是内容。。。
这是内容。。。
</text>
</view>
</view>
微信小程序开发--数据绑定的更多相关文章
- 微信小程序之数据绑定(五)
[未经作者本人允许,请勿以任何形式转载] 前几篇讲述微信小程序开发工具使用.生命周期和事件. 本次讲述微信小程序数据和视图绑定 >>>数据视图绑定 做前端开发的同学,尤其是WEB前端 ...
- 微信小程序开发-新闻列表之新闻列表绑定
微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作 在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因 ...
- 微信小程序开发总结(一)
微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早 ...
- 这是一篇满载真诚的微信小程序开发干货
1月9日零点刚过,张小龙与团队正式发布微信小程序.它究竟能在微信8.5亿用户中牵动多少人,现在还很难说.但对于创业者来讲,小程序无疑带来了新契机,以及服务“上帝”们的新方式. 从今天起,只要开发者登录 ...
- 微信小程序开发1_资料收集
[前言] 小程序 [一.资料] 微信官网 开发文档.工具 等 https://mp.weixin.qq.com/cgi-bin/wx [二] 创建小程序和编辑代码,先安装 开发者工具 ,根据所使用的操 ...
- 初尝微信小程序开发与实践
这可能是一个java程序员最不务正业的一次分享了. 小程序的火热相信不用我多说了,年初的时候老婆去浦东某达面试,甚至都被问有没有小程序测试经验.俨然小程序成为了互联网公司自PC,WAP,安卓,IOS之 ...
- 《腾讯游戏人生》微信小程序开发总结
为打通游戏人生擂台赛与线下商家的O2O衔接,同时响应时下日臻火热的微信小程序,项目团队决定也开发一款针对性的微信小程序,以此方便商家在我们平台入驻并进行擂台赛事的创建和奖励的核销,进一步推广擂台赛的玩 ...
- 微信小程序开发:学习笔记[2]——WXML模板
微信小程序开发:学习笔记[2]——WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建 ...
- 微信小程序开发入门与实践
基础知识---- MINA 框架 为方便微信小程序开发,微信为小程序提供了 MINA 框架,这套框架集成了大量的原生组件以及 API.通过这套框架,我们可以方便快捷的完成相关的小程序开发工作. MIN ...
随机推荐
- Android 联系人导入导出(VCard格式)
之前在Android Contact 导入导出 vcf格式(不依赖第三方库)记录了一下依赖Android sdk中的功能导入导出联系人(第一次做java项目内容,有些地方的记录是否正确,暂时我也不知道 ...
- A Summaryof JDBC
Die Sonne gewinnen! I think it's easy to understand what is JDBC used for. Programer's program shoul ...
- css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件
引用:http://www.css88.com/book/css/properties/user-interface/pointer-events.htm 语法: pointer-events:aut ...
- MySQL 常用数据存储引擎区别
mysql有多种存储引擎,目前常用的是 MyISAM 和 InnoDB 这两个引擎,除了这两个引擎以为还有许多其他引擎,有官方的,也有一些公司自己研发的.这篇文章主要简单概述一下常用常见的 MySQL ...
- Twitter的分布式自增ID算法snowflake(雪花算法) - C#版
概述 分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的.有些时候我们希望能使用一种简 ...
- PHP阿里大鱼短信验证
PHP阿里大鱼短信验证 第一步 登陆阿里大于注册账号,在用户管理中心创建应用,确定AppKEY和App Secret还有配置签名 第二步 在应用管理中选择SDK下载,或者直接点击http://down ...
- 朱晔的互联网架构实践心得S2E6:浅谈高并发架构设计的16招
朱晔的互联网架构实践心得S2E6:浅谈高并发架构设计的16招 概览 标题中的高并发架构设计是指设计一套比较合适的架构来应对请求.并发量很大的系统,使系统的稳定性.响应时间符合预期并且能在极端的情况下自 ...
- std::string的Copy-on-Write:不如想象中美好(VC不使用这种方式,而使用对小字符串更友好的SSO实现)
Copy-on-write(以下简称COW)是一种很重要的优化手段.它的核心思想是懒惰处理多个实体的资源请求,在多个实体之间共享某些资源,直到有实体需要对资源进行修改时,才真正为该实体分配私有的资源. ...
- EF 6.0 Code First 迁移MySql数据库
一.准备工作 使用NUGET安装Entity Framework 6,下载MySql Connector/Net 6.9.5 二.创建实体 我们在下面创建了两个类(博客和文章),并 ...
- WIN8安装oracle11g时出现不满足最低配置解决办法
Windows8上面安装Oracle11g客户端和服务端时都会出现这样的错误提示:[INS-13001]环境不满足最低要求 产生这种报错的主要原因在于:oracle 11g的配置文件中并没有提供匹配w ...