微信小程序前端开发实现双向数据绑定

约定不等于承诺〃 2023-06-05 08:18 3阅读 0赞

现在公司有一个要求要实现这样的一个功能：

![20191008174208937.gif][]

先来看html代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70][]

js代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 1][]

**html代码:**

**js代码：**

Page({
    
    data: {
    
    customerData:[{
    
    name:'李某某',
    
    phone:'15975648767',
    
    idnum:'440982345610103217',
    
    disabled:false
    
    }],
    
    },
    
    addCustom:function(){
    
    this.setData({
    
    customerData: this.data.customerData.concat({
    
    del:true,
    
    })
    
    });
    
    },
    
    
    
    inputedit:function(e){
    
    let dataset = e.currentTarget.dataset;
    
    let value = e.detail.value;
    
    this.data.customerData[dataset.idx][dataset.obj] = value;
    
    this.setData({
    
    customerData: this.data.customerData
    
    });
    
    
    
    },
    
    delCustom:function(e){
    
    
    
    let index = e.currentTarget.dataset.idx;
    
    let data = this.data.customerData
    
    data.splice(index,1)
    
    this.setData({
    
    customerData: data
    
    });
    
    
    
    }
    
    })

**css代码，我用的是weui框架，要在app.wxss引入：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 2][]

/\* 客户信息 \*/

.weui-form-preview\_\_hd\{

background:\#F7F8FC;

padding:10px 16px;

.weui-form-preview\_\_label\{

font-size: 18px;

font-weight: bold;

color:\#2F3943;

.weui-form-preview\_\_value\_in-hd\{

font-size: 12px;

color:\#3D7EFE;

.weui-form-preview\_\_value\{

text-align: left;

font-weight: bold;

font-size: 15px;

color:\#2F3943

.weui-form-preview\_\_hd:after\{

border:none;

.weui-form-preview:after \{

border-bottom:none;

.weui-input\{

#  ================================================ #

# ** 如果你是新手想学前端可以加我，** #

# **如果你是一个有基础，但学习前端没有明确的方向，可以加我** #

# **如果你刚毕业找到前端的工作，但工作上遇到问题或怕遇到问题解决不了的可以加我** #

# **一对一私人指导/教学（费用很便且）：微信：** #

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdmVyc2lvbmxp_size_15_color_FFFFFF_t_70_g_se_x_16][]

[20191008174208937.gif]: /images/20230601/6813d59b250c40159104c4441e4dd6e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70]: /images/20230601/9ee2543896df41428c0617b06f2c0668.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/ad1fed0c783445c5b591c9010009d3bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 2]: /images/20230601/bca2d05a0c8d4816b64161693fa7ec61.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdmVyc2lvbmxp_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20230601/dead3d7421dc421fb4af788c5f5040a9.png