微信小程序input双向绑定

最新推荐文章于 2024-07-19 13:29:53 发布

CHUAIXYu

最新推荐文章于 2024-07-19 13:29:53 发布

阅读量224

点赞数

文章标签：微信小程序前端 javascript html css

本文链接：https://blog.csdn.net/chuaixingyu/article/details/128909830

版权

该代码示例展示了如何在HTML中创建一个输入框和添加按钮，使用CSS进行样式布局，JS处理数据绑定和事件监听。当用户在输入框输入文字并点击添加按钮时，内容会被添加到列表中。

摘要由CSDN通过智能技术生成

HTML

<view class="topBox">
  <input type="text" bindinput="inputeidt" class="inputBox" />
<button bindtap="add" style="width: 25%;height: 90rpx;font-size: 14px;">添加</button> 
</view>

CSS

.topBox{
  display: flex;
  justify-content: center;
  align-items: center;
}
.inputBox{
  width: 70%;
  height: 80rpx;
  margin-right: 3px;
  border: 1px solid #eee;
}

data:{
thing:null,
}
  // 输入框
  inputeidt(e){
    // console.log(e);
    this.setData({
      thing:e.detail.value
    })
  },
  // 添加按钮
add(){
// console.log(this.data.thing);
// console.log(this.data.doneList);
this.data.todoList.push(this.data.thing)
// console.log(this.data.todoList);
this.setData({
  todoList:this.data.todoList
})
},

在这里插入图片描述