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


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,水平有待提高
Jan 31 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
Element Alert警告的具体使用方法
Jul 27 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
拼音码表的生成
2006/10/09 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP实现微信发红包程序
2015/08/24 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
用实例分析Python中method的参数传递过程
2015/04/02 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
python如何操作mysql
2020/08/17 Python
python如何运行js语句
2020/09/09 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
计算机本科生自荐信
2013/10/15 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
庆六一宣传标语
2014/10/08 职场文书
涨价通知怎么写
2015/04/23 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
开学第一周总结
2015/07/16 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书