微信小程序筛选框的数据交互

在网上找了一个筛选框，但是不太懂怎么与我自己的数据交互。

 //确认筛选
 Confirm:function(）+
  this.setData(f
     sreenShow:false
 sortShow:function(）{
  this.setData(H                               any
     sortShow:!this.data.sortShow
  H

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7718436
• 你也可以参考下这篇文章：微信小程序云开发数据库不能读写的权限问题
• 除此之外, 这篇博客: 微信小程序，数据双向绑定？多个输入框，一个方法就够了！中的 有办法！ 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 就是利用以下两个原理：

  1. wxml中的data-XXX元素可以在回调函数的e.target.dataset.XXX中访问。
  2. 后端赋值的this.setData方法可以使用[var]: value方式以变量为key进行赋值。

  所以，我们可以这样解决这个问题，假设这边我们有2个输入框，我们如何通过一个方法进行数据绑定：

  WXML：

    <van-field
      value="{{ account }}"
      data-key="account"
      bind:change="onFieldChange"
      label="账号"
      placeholder="请输入账号"
      bind:blur = "onFieldBlur_validate"
      error-message="{{ account_error }}"
    />
    <van-field
      value="{{ passwd }}"
      data-key="passwd"
      bind:change="onFieldChange"
      type="password"
      label="密码"
      placeholder="请输入密码"
      bind:blur = "onFieldBlur_validate"
      error-message="{{ passwd_error }}"
    />
  

  JS：

    // 输入框变化时更新数据
    onFieldChange(e){
      console.log(`赋值前：this.data:`,this.data);
      this.setData({
        [e.target.dataset.key]:e.detail
      });
      console.log(`赋值后：this.data:`,this.data);
      // console.log(`this.data.${e.target.dataset.key}:`,this.data[e.target.dataset.key]);
    },
  

  通过这个样子，就是在输入框发生变化的时候，根据target.dataset.key的值，把这个输入框的detail（就是用户输入的内容）设置到this.data中。

  相对的，你还可以扩张到其它地方，比如写一个数值合法性校验工具，然后再blur的时候，通过上述方法，进行校验。思路如下：

  import myconfig from "../../utils/myconfig";
    // 离开输入时进行验证
    onFieldBlur_validate(e){
      this.setData({
        [e.target.dataset.key + "_error"]: myconfig.validateTools[e.target.dataset.key](e.detail.value)
      });
    },
  

  下面是../../utils/myconfig

  const validateTools = {
    account: account => {
      console.log('validate_account account:',account);
      if(account.length<6 || account.length>20){
        return "账号长度应大等于6，小于20"
      }
      if(/[^\w]+/.exec(account)){
        console.log(/[^\w]+/.exec(account));
        return '账号仅允许使用"a-zA-Z"和"_"下划线'
      }
      return ""
    },
    passwd: passwd => {
      console.log('validate_passwd passwd:',passwd);
      if(passwd.length<6 || passwd.length>20){
        return "密码长度应大等于6，小于20"
      }
      return ""
    },
    user_name: user_name => {
      console.log('validate_user_name user_name:',user_name);
      if(user_name.length<1 || user_name.length>10){
        return "用户名长度应大等于1，小于10"
      }
      if(/[^\w\u4e00-\u9fa5]+/.exec(user_name)){
        console.log(/[^\w\u4e00-\u9fa5]+/.exec(user_name));
        return '仅允许使用汉字、英文字母、数字、下划线。'
      }
      return ""
    },
  }
  
  module.exports = {
    validateTools:validateTools
  }
  
  

  我想应该对你有所帮助ba？哇哈哈

• 您还可以看一下 田德华老师的小程序·云开发实战 微信朋友圈所有功能课程中的 发布动态 ~ 获取输入的文本内容小节, 巩固相关知识点
  

你需要把你的数据也贴出来看看