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


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 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
js实现随机圆与矩形功能
Oct 29 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实现获取域名的方法小结
2014/11/05 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
Django中的ajax请求
2018/10/19 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
Python Django搭建网站流程图解
2020/06/13 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
自考毕业自我鉴定
2014/03/18 职场文书
勤俭节约倡议书
2014/04/14 职场文书
啤酒节策划方案
2014/05/28 职场文书
护士年终考核评语
2014/12/31 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
Python内置数据类型中的集合详解
2022/03/18 Python