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


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 相关文章推荐
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
详解JavaScript 异步编程
Jul 13 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 select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
python与mysql数据库交互的实现
2020/01/06 Python
医药营销专业个人自荐信
2013/09/29 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
时尚女魔头观后感
2015/06/04 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
Python基础之数据结构详解
2021/04/28 Python
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android