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


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 判断字符串是否为数字的简单方法
Jul 25 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
JavaScript构造函数详解
Dec 27 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 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执行速度全攻略
2006/10/09 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
php生成短网址示例
2014/05/05 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
python分治法求二维数组局部峰值方法
2018/04/03 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
函授毕业个人自我评价
2014/02/20 职场文书
研修心得体会
2014/09/04 职场文书
优秀教师个人总结
2015/02/11 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
Python基于Opencv识别两张相似图片
2021/04/25 Python
彻底理解golang中什么是nil
2021/04/29 Golang