微信小程序开发--数据绑定
一、单项数据绑定
<!-- 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 ...
随机推荐
- Win10《芒果TV》更新v3.8.50勇敢版:新增短信和扫码登录
勇敢,是心中最初的信仰,实景科幻实验节目<勇敢的世界>,重装上阵对抗升级,<中餐厅2>皇阿玛圣驾亲临,坐镇中国味道.Win10版<芒果TV>全平台同步更新勇敢版v3 ...
- Win10《芒果TV - Preview》更新至v3.1.57.0:热门节目和电视台直播回归
Win10<芒果TV - Preview>是Win10<芒果TV>官方唯一指定内测预览版,最新的改进和功能更新将会在此版本优先体验. 为了想让大家能在12月31日看到<湖 ...
- MessageBox用法大全
//1.显示提示信息 MessageBox.Show("Hello World!"); //2.给消息框加上标题 MessageBox.Show("Hello World ...
- Delphi 编写ActiveForm窗体工程知识和样例(开发浏览器客户端应用程序)(有详细步骤)
一.基础知识介绍: 1.ActiveForm的基础知识介绍: 在Delphi中,ActiveForm是封装了Delphi Form的一种ActiveX控件.ActiveForm其实是一种标准的Delp ...
- DELPHI美化界面(2009开始TPanel增加了ParentBackGround)
1.透明问题. 要重新调整界面确实很麻烦,以前用DELPHI开发的界面都很土,和WEB真是没办法比.(我以前用的是DELPHI7),现在回想起来,DELPHI难做的原因是:没有透明控件.所有控件都是不 ...
- 想让一个Widget成为模态,我们只需要对其设置setAttribute(Qt::WA_ShowModal, true);
想让一个Widget成为模态,我们只需要对其设置: setAttribute(Qt::WA_ShowModal, true); 注意:这是QWidget的成员函数 ,也就是说,QWidget可以显示为 ...
- Qt加载百度离线地图
1.下载百度地图离线API 1.3 下载链接:http://download.csdn.NET/detail/caoshangpa/9476608,网上虽然出现了2.0版本离线API,但是经试用,存在 ...
- java.lang.ClassNotFoundException: org.hibernate.ejb.HibernatePersistence 解决方法
编译遇到错误,如下: May 11, 2017 1:49:42 PM org.springframework.web.context.ContextLoader initWebApplicationC ...
- C# 设计模式,工厂方法
C#工厂方法 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...
- java编程思想之面向对象
面向对象和面向过程 面向对象(Object Oriented),简称OO,是软件开发方法的一种,我们都知道java是基于面向对象开发的,但是说到面向对象,我们不得不提一提面向过程开发,面向过程,又称结 ...