微信小程序利用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)文章
javascript showModalDialog 多層模態(tài)窗口實(shí)現(xiàn)頁面提交及刷新的代碼
javascript 多層模態(tài)窗口showModalDialog頁面提交及刷新2009-11-11
一套值得分享和大家收藏的Bootstrap學(xué)習(xí)教程，完整的知識(shí)體系，系統(tǒng)的學(xué)習(xí)資料，幫助大家開啟Bootstrap Table學(xué)習(xí)之旅，享受學(xué)習(xí)的樂趣2016-11-11
自用js開發(fā)框架小成 學(xué)習(xí)js的朋友可以看看
前段時(shí)間項(xiàng)目需要用到j(luò)s樹，找了好多都不符合項(xiàng)目需求，后來發(fā)現(xiàn)了梅花雪樹和js框架，類似C#名稱空間的用法讓我眼前一亮，遂拿來主義，讀了幾遍代碼后就開工了（我是個(gè)急性子呵呵），完成了大部分，最近才找出來測(cè)試了下。2010-11-11
js 索引下標(biāo)之li集合綁定點(diǎn)擊事件
本文通過一段實(shí)例代碼給大家講解了js索引下標(biāo)之li集合綁定點(diǎn)擊事件的相關(guān)知識(shí)，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-01-01
這篇文章主要介紹了nuxt中使用路由守衛(wèi)的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
JS判斷指定dom元素是否在屏幕內(nèi)的方法實(shí)例
做圖片滾動(dòng)加載的時(shí)候會(huì)判斷圖片是否在可視區(qū)域內(nèi),如果在就加載原地址圖片,下面這篇文章就給大家介紹了利用JS判斷指定dom元素是否在屏幕內(nèi)的方法實(shí)例,需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
JS繪圖Flot如何實(shí)現(xiàn)可選顯示曲線圖功能
這篇文章主要介紹了JS繪圖Flot如何實(shí)現(xiàn)可選顯示曲線圖功能,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
微信小程序獲取手機(jī)網(wǎng)絡(luò)狀態(tài)的方法【附源碼下載】
這篇文章主要介紹了微信小程序獲取手機(jī)網(wǎng)絡(luò)狀態(tài)的方法,涉及微信小程序wx.getNetworkType函數(shù)檢查網(wǎng)絡(luò)連接狀態(tài)的相關(guān)使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了JS常用表單驗(yàn)證方法,需要的朋友可以參考下2014-05-05
JS函數(shù)進(jìn)階之繼承用法實(shí)例分析
這篇文章主要介紹了JS函數(shù)進(jìn)階之繼承用法,結(jié)合實(shí)例形式分析了JavaScript函數(shù)繼承相關(guān)定義與使用操作技巧,需要的朋友可以參考下2020-01-01