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


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 相关文章推荐
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 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实现简单的上传进度条
2015/11/17 PHP
php中的异常和错误浅析
2017/05/03 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
javascript数组去掉重复
2011/05/12 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python实现的堆排序算法示例
2018/04/29 Python
python中使用print输出中文的方法
2018/07/16 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
解决python flask中config配置管理的问题
2019/07/26 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
超市端午节活动方案
2014/01/23 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
关于青春的演讲稿
2014/05/05 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
党课心得体会范文
2014/09/09 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书