小程序动态修改样式，显示或隐藏view(两种方案)

前言

想做一个个人信息页面，点击修改按钮，就可以使得view中的显示内容变成input，然后就可以修改了。
网上搜了一下相关内容，有方案，但个人感觉一般，他们把style的每个属性都用花括号控制，这也太麻烦了吧…之前有过网页开发的经验，结合小程序的特性，就想出了两种办法：

1. wx:if条件渲染
2. js动态控制class

实现方案

上面说到将view变成input，其实准确来说是两个控件的显示和隐藏切换。

我们只要实现点击修改按钮后，view和input两个的显示属性交换即可。

方案一：wx:if条件渲染

这个是小程序的特性，详情见文档。

我们用wx:if来控制渲染，使用show_condition这个标志位。
分别写一个view和input，value都是一样的内容，但是渲染状态位是相反的，wxml如下：

<!-- 联系方式 -->
    <view class="uploader">
      <view>联系方式：</view>
      <view wx:if="{{show_condition}}">{{tele}}</view>
      <input wx:elif="{{!show_condition}}" name="comment" style="background-color: #FFFFFF" value="{{tele}}" />
    </view>

这时我们只要绑定点击按钮事件，将状态位进行修改即可，当然主要要在data里面声明一下初始值，js如下：

data: {
    show_condition:true
  },

bindModifyInfo: function () {
    console.log("触发了")
    this.setData({
      show_condition : false,
    })
  },

方案二：js动态控制class

这个是由网页开发得到的启发，我们可以动态设置节点的class属性。

首先先写两个wxss属性：

.show_view {
  display: inline;
}

.hide_view {
  display: none;
}

然后以一个view为例，我们设置class的名称为一个变量，wxml如下：

<view class="{{class_name}}">{{tele}}</view>

然后绑定点击事件，控制变量的值，让其变成指定的样式也可以完成隐藏，我们这边只要将值设置为hide_view就行了。js如下：

bindModifyInfo: function () {
    console.log("触发了")
    this.setData({
      class_name:"hide_view"
    })
  }

总结

文档上是这么写的

因为wx:if之中的模板也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
同时wx:if也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好。

修改class的方法虽然有更小的消耗，但我个人觉得wx:if的写法会让整体的代码可读性更高。
当然这个也要看个人需求啦，目前来说wx:if没有让人感到页面卡顿，所以我暂时还是先使用了wx:if的方案。

---

参考链接

1. https://www.w3cschool.cn/weixinapp/weixinapp-conditional.html
2. https://developers.weixin.qq.com/miniprogram/dev/framework/