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


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动态加载js,css文件实现代码
Apr 03 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
如何实现iframe父子传参通信
Feb 05 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查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
php5.3 注意事项说明
2013/07/01 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python数据结构之图的应用示例
2018/05/11 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
用python制作个视频下载器
2021/02/01 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
计算机学生求职信范文
2014/01/30 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
2016年春节慰问信息
2015/03/25 职场文书
警告通知
2015/04/25 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js