微信小程序?qū)崿F(xiàn)同一頁(yè)面取值的方法分析

更新時(shí)間：2019年04月30日 10:46:04 作者：weixin_41991473

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)同一頁(yè)面取值的方法,結(jié)合實(shí)例形式分析了微信小程序在同一頁(yè)面取值的常見情況與具體操作技巧,需要的朋友可以參考下

本文實(shí)例講述了微信小程序?qū)崿F(xiàn)同一頁(yè)面取值的方法。分享給大家供大家參考，具體如下：

1.js里單個(gè)的值在wxml里取值方法：js里將該值定義為全局變量，在wxml里采用 {{ }}即可獲取。

實(shí)例：

js里得值：

data{
schoolName:"清華大學(xué)"
}

wxml里獲?。?/p>

<view class="texts">{{schoolName}}</view>

2.js里數(shù)組或是集合在wxml里的取值方法：js里將該集合或數(shù)組定義為全局變量，在wxml里采用for循環(huán)再采用 {{ }}即可獲取。

實(shí)例：

data{
school:[
{ schoolName:"清華大學(xué)",
schoolAddress:"北京"，
schoolTime:"1911"}，
{ schoolName:"浙江大學(xué)",
schoolAddress:"浙江"，
schoolTime:"1935"},
]
}

wxml里獲?。?/p>

<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.值

實(shí)例1：

wxml里的值：

<view class="texts">
<input type="text" value="{{schoolName}}" bindinput="addSchoolName" placeholder="請(qǐng)輸入學(xué)校名 如:上海大學(xué)" />
</view>

js里獲取wxml里的值

addSchoolName：function (e) {
this.data.schoolName=e.detail.value
}

實(shí)例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
}

附：上述傳值方法只在同一頁(yè)面有效

希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js中“??“和“?.“用法小結(jié)
這篇文章主要介紹了js中“??“和“?.“用法小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-11-11
微信小程序?qū)崿F(xiàn)自定義加載圖標(biāo)功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)自定義加載圖標(biāo)功能，非常不錯(cuò)具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-07-07
基于原生JS實(shí)現(xiàn)圖片裁剪
要進(jìn)行圖片編輯，最重要要能夠?qū)D片進(jìn)行裁剪。主要的實(shí)現(xiàn)分成兩部分，一部分是前端利用js進(jìn)行裁剪區(qū)域選擇，第二部分是利用PHP進(jìn)行后臺(tái)處理?，F(xiàn)在就跟大家分享一下。
2016-08-08
JavaScript前端常見異常及如何捕獲詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript前端中的常見異常以及如何捕獲這些異常,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下
2024-03-03
JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能及使用探索
這篇文章主要介紹了JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能使用探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2024-01-01
原生JS實(shí)現(xiàn)加入收藏夾的代碼
加入收藏夾功能在網(wǎng)上可以搜索到很多相關(guān)的文章，本文要為大家介紹的是如何使用原生js來實(shí)現(xiàn)所謂的收藏，感興趣的朋友可以參考下
2013-10-10
用Javascript實(shí)現(xiàn)Windows任務(wù)管理器的代碼
在Windows系統(tǒng)上，自從98系統(tǒng)以來就提供了腳本宿主（Windows Scripting Host 簡(jiǎn)稱WSH）的功能，WSH可以加載并運(yùn)行JS和VBS腳本，并支持調(diào)用系統(tǒng)的COM組件，在COM組件的支持下腳本可以輕松實(shí)現(xiàn)非常強(qiáng)大的功能
2012-03-03
uni-app小程序中父組件和子組件傳值的實(shí)現(xiàn)實(shí)例
uniapp父子組件引用傳值,和vue的一樣,沒有小程序那樣的麻煩,下面這篇文章主要給大家介紹了關(guān)于uni-app小程序中父組件和子組件傳值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
利用JS實(shí)現(xiàn)scroll自定義滾動(dòng)效果詳解
這篇文章主要給大家介紹了關(guān)于利用JS如何實(shí)現(xiàn)scroll自定義滾動(dòng)效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-10-10
新手入門帶你學(xué)習(xí)JavaScript引擎運(yùn)行原理
這篇文章主要介紹了新手入門帶你學(xué)習(xí)JavaScript引擎運(yùn)行原理,JavaScript引擎是一個(gè)專門處理JavaScript腳本的虛擬機(jī)，一般會(huì)附帶在網(wǎng)頁(yè)瀏覽器之中。下面我們來詳細(xì)了解一下吧
2019-06-06