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

 更新时间:2019年04月30日 10:46:04   作者:weixin_41991473  
这篇文章主要介绍了微信小程序实现同一页面取值的方法,结合实例形式分析了微信小程序在同一页面取值的常见情况与具体操作技巧,需要的朋友可以参考下

本文实例讲述了微信小程序实现同一页面取值的方法。分享给大家供大家参考,具体如下:

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
}

附:上述传值方法只在同一页面有效

希望本文所述对大家微信小程序开发有所帮助。

相关文章

  • 原生JS实现的简单小钟表功能示例

    原生JS实现的简单小钟表功能示例

    这篇文章主要介绍了原生JS实现的简单小钟表功能,涉及javascript结合定时器的数值运算与页面元素属性动态修改相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • JS鲜为人知的问题之[] == ![]结果为true、而{} == !{}却为false

    JS鲜为人知的问题之[] == ![]结果为true、而{} == !{}却为false

    这篇文章主要给大家介绍了关于JS鲜为人知的问题之[] == ![]结果为true、而{} == !{}却为false的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 微信小程序swiper-dot中的点如何改成滑块详解

    微信小程序swiper-dot中的点如何改成滑块详解

    swiper组件是滑块视图容器,这篇文章主要给大家介绍了关于微信小程序swiper-dot中的点如何改成滑块的相关资料,实现以后的效果还是不错的,需要的朋友可以参考下
    2021-07-07
  • JavaScript 数组基本操作全解

    JavaScript 数组基本操作全解

    今天这篇文章就是来和大家详细聊聊JavaScript中数组的基本操作,很多语言都是在数组这有个分水岭。听懂了接下来就很容易,听不懂就难办了,大家要认真看哟。希望大家读完有所收获,那我辛苦码字也就值了
    2022-02-02
  • 在微信小程序里使用watch和computed的方法

    在微信小程序里使用watch和computed的方法

    这篇文章主要介绍了在微信小程序里使用watch和computed的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • JS实现间歇滚动的运动效果实例

    JS实现间歇滚动的运动效果实例

    这篇文章主要介绍了JS实现间歇滚动的运动效果,涉及javascript定时器触发动态改变页面元素的相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • JS实现仿微信支付弹窗功能

    JS实现仿微信支付弹窗功能

    这篇文章主要介绍了JS实现仿微信支付弹窗功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • JS实现页面载入时随机显示图片效果

    JS实现页面载入时随机显示图片效果

    这篇文章主要介绍了JS实现页面载入时随机显示图片效果,涉及javascript基于随机数与数组的页面元素动态修改相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • 解决使用layui对select append元素无效或者未及时更新的问题

    解决使用layui对select append元素无效或者未及时更新的问题

    今天小编就为大家分享一篇解决使用layui对select append元素无效或者未及时更新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js操作table元素实现表格行列新增、删除技巧总结

    js操作table元素实现表格行列新增、删除技巧总结

    这篇文章主要介绍了js操作table元素实现表格行列新增、删除技巧,以实例形式分析总结了JavaScript针对table表格进行行列的增加与删除相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11

最新评论