微信小程序实现同一页面取值的方法分析


Posted in Javascript onApril 30, 2019

本文实例讲述了微信小程序实现同一页面取值的方法。分享给大家供大家参考,具体如下:

1.js里单个的值在wxml里取值方法:js里将该值定义为全局变量,在wxml里采用 {{ }}即可获取。

实例:

js里得值:

data{
schoolName:"清华大学"
}

wxml里获取:

<view class="texts">{{schoolName}}</view>

2.js里数组或是集合在wxml里的取值方法:js里将该集合或数组定义为全局变量,在wxml里采用for循环再采用 {{ }}即可获取。

实例:

data{
school:[
{ schoolName:"清华大学",
schoolAddress:"北京",
schoolTime:"1911"},
{ schoolName:"浙江大学",
schoolAddress:"浙江",
schoolTime:"1935"},
]
}

wxml里获取:

<view wx:for="{{school}}">
<view class="texts">{{item.schoolName}}</view>
<view class="texts">{{item.schoolAddress}}</view>
<view class="texts">{{item.schoolTime}}</view>
</view>

3.wxml的值在js里获取的方法:e.detail.value 或是e.target.dataset.值或是 e.currentTarget.dataset.值

实例1:

wxml里的值:

<view class="texts">
<input type="text" value="{{schoolName}}" bindinput="addSchoolName" placeholder="请输入学校名 如:上海大学" />
</view>

js里获取wxml里的值

addSchoolName:function (e) {
this.data.schoolName=e.detail.value
}

实例2:

wxml里的值:

<view class="texts">
<button data-item="{{item}}" data-as="{{item.schoolAddress}}" bindtap="deleteSchoolAddress">删除</button>
</view>

js里获取wxml里的值

deleteSchoolAddress:function (e) {
var SchoolAddrsss=e.currentTarget.dataset.as
var school=e.target.dataset.item
}

附:上述传值方法只在同一页面有效

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
一百行JS代码实现一个校验工具
Apr 30 #Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 #Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 #Javascript
VSCode使用之Vue工程配置eslint
Apr 30 #Javascript
微信小程序API—获取定位的详解
Apr 30 #Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 #Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 #Javascript
You might like
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
Python实现telnet服务器的方法
2015/07/10 Python
python提取字典key列表的方法
2015/07/11 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
python的exec、eval使用分析
2017/12/11 Python
python安装教程
2018/02/28 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python实现多人聊天室
2020/03/31 Python
python实现自动解数独小程序
2019/01/21 Python
python多线程同步实例教程
2019/08/11 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
公司委托书范本5篇
2014/09/20 职场文书
交通事故和解协议书
2014/09/25 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
高一军训决心书
2015/02/05 职场文书
神农溪导游词
2015/02/11 职场文书
公司出纳岗位职责
2015/03/31 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书