微信小程序开发——隐藏且占位

index.wxml

<!--index.wxml-->
<!--页面根标签-->
<view class="content">
	<!--pics文件夹下的background.jpg文件-->
	<image class='background' src="/images/beijing1.jpg" mode="aspectFill"></image>
	<!--页面其它部分-->
</view>

<view class="box">
  <view class="title">货币兑换</view>
  <form bindsubmit="calc" bindreset="reset">
    <input name='cels' placeholder='请输入人民币金额' type='number' auto-focus="true"></input>
    <input name='meihui' placeholder='美元汇率' type='number' auto-focus="true"></input>
    <input name='yinghui' placeholder='英镑汇率' type='number' auto-focus="true"></input>
    <input name='ouhui' placeholder='欧元汇率' type='number' auto-focus="true"></input>
    <input name='rihui' placeholder='日元汇率' type='number' auto-focus="true"></input>
    <view class='btnLayout'>
      <button  form-type="submit" bindtap='reset'>计算</button>		//bindtap='reset'  绑定flag的属性
      <button  form-type="reset" bindtap='abc'>清除</button>	//bindtap='abc'  绑定flag的属性
    </view>
    <view style='{{flag}}' class="textLayout">
      <text>兑换美元为：{{M}}</text>
      <text>兑换英镑为：{{Y}}</text>
      <text>兑换欧元为：{{O}}</text>
      <text>兑换日元为：{{R}}</text>
    </view>
  </form>
</view>

index.js

//index.js
var C,MH,YH,OH,RH;
Page({
  data:{
    flag:"visibility: hidden;"		//设置隐藏且占位
  },
  calc: function (e) {
    C = parseInt(e.detail.value.cels)
    MH= parseInt(e.detail.value.meihui)
    YH= parseInt(e.detail.value.yinghui)
    OH= parseInt(e.detail.value.ouhui)
    RH= parseInt(e.detail.value.rihui)
    this.setData({
      M: (C / MH).toFixed(4),
      Y: (C / YH).toFixed(4),
      O: (C / OH).toFixed(4),
      R: (C / RH).toFixed(4),
    })
  },
  reset: function () {
    this.setData({
      M: '',
      Y: '',
      O: '',
      R: '',  
      flag:""			//取消隐藏
    })
  },
  abc:function () {
      this.setData({
        flag:"visibility: hidden;"		//继续维持隐藏属性
      })
    }
})