微信小程序开发学习笔记——3.10【小案例】表单提交样式布局与model双向绑定

>>跟着b站up主“咸虾米_”学习微信小程序开发中，把学习记录存到这方便后续查找。

课程连接：3.10.【小案例】表单提交样式布局与model双向绑定_哔哩哔哩_bilibili

一、model简易双向绑定

简单双向绑定语法查阅：小程序框架 / 视图层 / 简易双向绑定 (qq.com)

如果使用 this.setData({ value: 'leaf' }) 来更新 value ，this.data.value 和输入框的中显示的值都会被更新为 leaf ；但如果用户修改了输入框里的值，却不会同时改变 this.data.value 。如果需要在用户输入的同时改变 this.data.value ，需要借助简易双向绑定机制。此时，可以在对应项目之前加入 model: 前缀：

<input model:value="{{value}}" />

二、代码

1、formKT.wxml

<view class="title">
    狂飙经典语录
  </view>

<view class="out"> 
  
  <view class="list">
    <view class="row" wx:for="{{listArr}}" wx:key="id"> <!--for循环遍历数组listArr中的每个对象-->
      <view class="text">{{index+1}}. {{item.title}}</view> <!--item就是listArr中的每一个对象，.title就是获取每个对象的title值-->
      <view class="close">
        <icon type="clear" size="26"/>
      </view>
    </view>
  </view>

  <view class="count">
    共3条评论
  </view>

  <view class="comment">
    <input type="text" 
    placeholder="请输入评论内容..."
    placeholder-style="color:#aaa;font-size:28rpx"    
    model:value="{{iptValue}}"
    />    
    <button size="mini" type="primary" disabled="{{!iptValue.length}}"    
    >发布</button>
  </view>
</view>

input的通用属性查阅：表单组件 / input (qq.com)

        iptValue初始设置为空值，input组件的value值为输入框的内容，在前面加上一个model之后可以实现双向绑定，在js文件中通过 this.setData({ iptvalue: 'leaf' })能够改变输入框内文字的显示，同时输入框内输入其他内容也可以改变iptValue的值。

        故而button中根据iptvalue的长度来确定“发布”按钮什么时候可以点击，当输入框内没有输入内容时长度为，通过“！”取反，则为1，按钮不能点击，当输入框内有内容时长度非0，通过“！”取反，则为0，按钮能点击。

2、formKT.wxss

/* pages/formKT/formKT.wxss */
.title{
  font-size: 50rpx;
  text-align: center;
  color:#3c3c3c;
  padding:60rpx 0 30rpx;
}
.out{
  width: 690rpx;
  margin:30rpx;
  box-shadow: 0 15rpx 40rpx rgba(0,0,0,0.1);
  border-radius: 10rpx;
  padding:30rpx;
  box-sizing: border-box;
}
.out .list .row{
  padding:15rpx 0;
  border-bottom:1rpx solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 34rpx;
  color:#333;
}
.out .list .row .text{
  padding-right: 10rpx;
  box-sizing: border-box;
}
.out .count{
  padding:20rpx 0;
  font-size: 30rpx;
  color:#888;
  text-align:center;
}
.out .comment{
  display: flex;
  margin-top:20rpx;
}
.out .comment input{
  flex:4;
  background: #f4f4f4;
  margin-right: 10rpx;
  height: 100%; 
  height: 64rpx;
  border-radius: 8rpx;
  padding:0 20rpx;
  color:#333;
}
.out .comment button{
  flex:1;
}

3、fromKT.js，将data部分改为如下代码

  data: {
    iptValue:"",
    listArr:[
      {id:123,title:"告诉老莫我要吃鱼"},
      {id:456,title:"咖啡不冲，迟早成功"},
      {id:789,title:"妻管严很幸福的哦"}
    ]
  },

和3.11是同一个小案例