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


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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
js实现带箭头的进度流程
Mar 26 Javascript
js实现复制粘贴的两种方法
Dec 04 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
一百行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常用工具类大全附全部代码下载
2015/12/07 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
js Calender控件使用详解
2015/01/05 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
javascript中select下拉框的用法总结
2016/01/07 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python实现flappy bird小游戏
2018/12/24 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python中get和post有什么区别
2020/06/19 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
大学生实习证明范本
2014/01/15 职场文书
仓库文员岗位职责
2014/04/06 职场文书
C++程序员求职信范文
2014/04/14 职场文书
《假如》教学反思
2016/02/17 职场文书
springboot实现string转json json里面带数组
2022/06/16 Java/Android
React更新渲染原理深入分析
2022/12/24 Javascript