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


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 相关文章推荐
jQuery ui 1.7更新小结
Aug 15 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
JS的get和set使用示例
Feb 20 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 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支持断点续传的源码
2010/05/16 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
Javascript中replace()小结
2015/09/30 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
js实现旋转木马效果
2017/03/17 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
简化vuex的状态管理方案的方法
2018/06/02 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
Python fileinput模块使用实例
2015/06/03 Python
python使用RNN实现文本分类
2018/05/24 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
火烧圆明园观后感
2015/06/03 职场文书
孔子观后感
2015/06/08 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python