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


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 相关文章推荐
JS 判断undefined的实现代码
Nov 26 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 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中图片等比缩放的实例
2013/03/24 PHP
php全角字符转换为半角函数
2014/02/07 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
Javascript常考语句107条收集
2010/03/09 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
python将视频转换为全字符视频
2019/04/26 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
关于赌博的检讨书
2014/01/08 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
事业单位考察材料范文
2014/12/25 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python