微信小程序利用button控制條件標(biāo)簽的變量問題
問題描述
在小程序中如何利用button按鈕來實(shí)現(xiàn)控制條件標(biāo)簽的變量呢?這也許是許多小伙伴們的問題,今天就來簡(jiǎn)單的給大家演示一遍。
解決方案
第一步:
首先打開微信公眾平臺(tái),將一個(gè) primary 的 button 按鈕代碼復(fù)制到開發(fā)平臺(tái)上,再為其綁定一個(gè)名為 ” bindfirst ” 的事件。(當(dāng)然這個(gè) bindfirst 的事件需要在 js 中去定義,下面的步驟將會(huì)去定義)
代碼如下:
<view> <button type="primary" bindtap="bindfirst"> 點(diǎn)一下就改變 </button> </view>
第二步:
創(chuàng)建一個(gè)text用來 if 條件標(biāo)簽來控制,同時(shí)在 js 中定義一個(gè)空的量。
將if條件的定義一個(gè) judge 變量給其賦值為 true ( if 條件標(biāo)簽如果為 true ,則顯示 text ,如果為 false 則不顯示 text ),再在 button 所綁定的事件中去改變 text 的值即可。
代碼如下:
wxml代碼
<view> <button type="primary" bindtap="bindfirst"> 點(diǎn)一下就改變 </button> <text wx:if="{{judge}}">{{text}}</text> </view>
js代碼
Page({ data: { text:[], judge:true, }, onLoad: function () { }, bindfirst:function(){ var s=this.data.judge this.setData({text:" 你點(diǎn)擊了我 " ,judge:!s}) } })
第三步:
得到運(yùn)行結(jié)果。
圖 1 圖例
點(diǎn)擊一次時(shí),會(huì)出現(xiàn)text,當(dāng)點(diǎn)擊第二次時(shí)就會(huì)關(guān)閉 text ,因?yàn)?bindfirst 中利用改變 judge 的值為 true 和 false 來達(dá)到改變 text 。
結(jié)語
點(diǎn)擊button時(shí)就會(huì)觸發(fā)綁定的 bindfirst 事件,而 bindfirst 事件中是 text 的變量,而 data 中所定義的 text 是一個(gè)空值;點(diǎn)擊時(shí)就會(huì)改變 text 中的量,從而達(dá)到簡(jiǎn)單的 if 條件標(biāo)簽的用 button 來控制。
總結(jié)
到此這篇關(guān)于微信小程序利用button控制條件標(biāo)簽的變量問題的文章就介紹到這了,更多相關(guān)微信小程序button控制條件標(biāo)簽的變量 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 微信小程序 條件渲染詳解
- 微信小程序 教程之條件渲染
- 微信小程序教程系列之視圖層的條件渲染(10)
- 微信小程序?qū)W習(xí)總結(jié)(二)樣式、屬性、模板操作分析
- 微信小程序?qū)W習(xí)總結(jié)(一)項(xiàng)目創(chuàng)建與目錄結(jié)構(gòu)分析
- 微信小程序 引用其他js文件實(shí)現(xiàn)代碼
- 詳解微信小程序入門五: wxml文件引用、模版、生命周期
- 微信小程序如何引用外部js,外部樣式,公共頁面模板
- 微信小程序視圖template模板引用的實(shí)例詳解
- 微信小程序引用公共js里的方法的實(shí)例詳解
- 微信小程序 教程之引用
- 微信小程序?qū)W習(xí)總結(jié)(三)條件、模板、文件引用實(shí)例分析
相關(guān)文章
不用jQuery實(shí)現(xiàn)的動(dòng)畫效果代碼
jQuery 框架用的人越來越多了, 無論是性能還是功能強(qiáng)大都不用多說.2010-11-11使用Web?Component實(shí)現(xiàn)防篡改水印
Web?Component內(nèi)部有鉤子天然支持被篡改時(shí)被觸發(fā),用來防篡改非常方便,所以本文就將使用Web?Component實(shí)現(xiàn)防篡改水印,感興趣的小伙伴可以了解下2023-12-12一文帶你徹底搞懂JS大文件分片上傳的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了前端JavaScript是如何實(shí)現(xiàn)大文件分片上傳的,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,需要的可以參考一下2023-05-05詳解微信開發(fā)中snsapi_base和snsapi_userinfo及靜默授權(quán)的實(shí)現(xiàn)
這篇文章主要介紹了詳解微信開發(fā)中snsapi_base和snsapi_userinfo及靜默授權(quán)的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-03-03JS實(shí)現(xiàn)最簡(jiǎn)單的冒泡排序算法
這篇文章主要介紹了JS實(shí)現(xiàn)最簡(jiǎn)單的冒泡排序算法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02JS重寫Date函數(shù)以及兼容IOS系統(tǒng)
這篇文章主要介紹了JS重寫Date函數(shù)以及兼容IOS系統(tǒng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10一文詳解JavaScript數(shù)組對(duì)象和字符串對(duì)象
這篇文章主要介紹了JavaScript數(shù)組對(duì)象和字符串對(duì)象,文章中有詳細(xì)的代碼示例,對(duì)學(xué)習(xí)或工作有一定的幫助,需要的小伙伴可以參考一下2023-04-04