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


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 相关文章推荐
网上抓的一个特效
May 11 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
jquery css实现流程进度条
Mar 26 jQuery
一百行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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
go语言计算两个时间的时间差方法
2015/03/13 Python
Python打包可执行文件的方法详解
2016/09/19 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
python 实现批量图片识别并翻译
2020/11/02 Python
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
优秀教师获奖感言
2014/01/31 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
稽核岗位职责范本
2015/04/13 职场文书
爱心捐款活动总结
2015/05/09 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书