本文實例講述了微信小程序dom操作的替代思路。分享給大家供大家參考，具體如下：
微信小程序無法操作dom，這意味著之前js中的各種習慣方法必須換一種思路實現
在嘗試了幾類情況后，發現部分情況下可以用{{}}變量綁定來實現效果。
比如：
一、實現view的顯示和隱藏
在js中的data設置變量 bottomHidden1:"block"；
然后在wxml中的view中設置<view class="bottom1" > </view>；
在其它我們需要的地方使用bindtap等綁定事件，js中定義該事件的function，使用this.setData修改bottomHidden1變量為none或者block，實現對上文中的bottom1進行顯示/隱藏控制
二、實現input中的 placeholder在獲取焦點時清空，失去焦點時顯示
1. 在js中，data中設置變量 priceHodler:"請輸入價格",
2. 我們可以設置兩個function控制變量priceHodler的值(此處添加了一種的方法實現輸入框中刪除圖標的顯示和消失，所以在data中設置了變量 clearImg）
displayImg:function(){
var imgDisplay="block";
var holderDisplay ="";
this.setData({
clearImg: imgDisplay,
priceHodler: holderDisplay,
})
},
hiddenImg:function(){
var imgHidden = "none";
var holderHidden = "請輸入價格";
this.setData({
clearImg: imgHidden,
priceHodler: holderHidden,
})
},
附：輸入框內容刪除圖標的功能實現（在js的data中也設置了變量 usdValue:null,）：
doClearText:function(){
this.setData({
usdValue: null,
})
},
3. 在wxml中添加這個input
<view class="input_view">
<input type="text" placeholder="{{priceHodler}}" placeholder-class="input-placeholder" class="price_usd" id="price_usd" name="price_usd" value="{{usdValue}}" bindfocus="displayImg" bindblur="hiddenImg"/>
</view>
<label class="clear_view" bindtap="doClearText">
<image class="clear_img" src="../img/search_close.png"></image>
</label>
這里將js的data中的priceHodler綁定給了placeholder，clearImg綁定在image的display屬性上，bindfocus="displayImg" bindblur="hiddenImg"會控制前兩個變量的值的變化， bindtap="doClearText"會控制input的value的變化
希望本文所述對大家微信小程序開發有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
