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

 更新时间: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中“??“和“?.“用法小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • 微信小程序实现自定义加载图标功能

    微信小程序实现自定义加载图标功能

    这篇文章主要介绍了微信小程序实现自定义加载图标功能,非常不错具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • 基于原生JS实现图片裁剪

    基于原生JS实现图片裁剪

    要进行图片编辑,最重要要能够对图片进行裁剪。主要的实现分成两部分,一部分是前端利用js进行裁剪区域选择,第二部分是利用PHP进行后台处理。现在就跟大家分享一下。
    2016-08-08
  • JavaScript前端常见异常及如何捕获详解

    JavaScript前端常见异常及如何捕获详解

    这篇文章主要为大家详细介绍了JavaScript前端中的常见异常以及如何捕获这些异常,文中的示例代码讲解详细,需要的小伙伴可以参考一下
    2024-03-03
  • JS生态系统加速探索Draft-js emoji插件功能及使用探索

    JS生态系统加速探索Draft-js emoji插件功能及使用探索

    这篇文章主要介绍了JS生态系统加速探索Draft-js emoji插件功能使用探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • 原生JS实现加入收藏夹的代码

    原生JS实现加入收藏夹的代码

    加入收藏夹功能在网上可以搜索到很多相关的文章,本文要为大家介绍的是如何使用原生js来实现所谓的收藏,感兴趣的朋友可以参考下
    2013-10-10
  • 用Javascript实现Windows任务管理器的代码

    用Javascript实现Windows任务管理器的代码

    在Windows系统上,自从98系统以来就提供了脚本宿主(Windows Scripting Host 简称WSH)的功能,WSH可以加载并运行JS和VBS脚本,并支持调用系统的COM组件,在COM组件的支持下脚本可以轻松实现非常强大的功能
    2012-03-03
  • uni-app小程序中父组件和子组件传值的实现实例

    uni-app小程序中父组件和子组件传值的实现实例

    uniapp父子组件引用传值,和vue的一样,没有小程序那样的麻烦,下面这篇文章主要给大家介绍了关于uni-app小程序中父组件和子组件传值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • 利用JS实现scroll自定义滚动效果详解

    利用JS实现scroll自定义滚动效果详解

    这篇文章主要给大家介绍了关于利用JS如何实现scroll自定义滚动效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • 新手入门带你学习JavaScript引擎运行原理

    新手入门带你学习JavaScript引擎运行原理

    这篇文章主要介绍了新手入门带你学习JavaScript引擎运行原理,JavaScript引擎是一个专门处理JavaScript脚本的虚拟机,一般会附带在网页浏览器之中。下面我们来详细了解一下吧
    2019-06-06

最新评论