帮我写一个微信小程序,输入多个字符串并且保存在一个动态数组里面
时间: 2023-12-14 21:37:23 浏览: 131
好的,以下是示例代码:
```html
<!-- index.wxml -->
<view class="container">
<view class="input-container">
<input placeholder="请输入字符串" bindinput="onInput" value="{{inputValue}}"/>
<button bindtap="onAdd">添加</button>
</view>
<view class="list-container">
<block wx:for="{{strList}}" wx:key="{{item}}">
<view class="item">{{item}}</view>
</block>
</view>
</view>
```
```javascript
// index.js
Page({
data: {
inputValue: '',
strList: []
},
onInput(e) {
this.setData({
inputValue: e.detail.value
})
},
onAdd() {
const { inputValue, strList } = this.data
if (inputValue.trim()) {
strList.push(inputValue)
this.setData({
strList,
inputValue: ''
})
}
}
})
```
其中,`input` 标签绑定了 `onInput` 事件,当输入框的值发生变化时调用该函数,并将输入框的值更新到 `inputValue` 数据中。`button` 标签绑定了 `onAdd` 事件,当用户点击添加按钮时,判断输入框的值是否为空,如果不为空,则将输入的字符串添加到 `strList` 数组中,并清空输入框的值和 `inputValue` 数据。
`wx:for` 标签用于遍历 `strList` 数组,并将数组中的每个元素渲染为一个 `view` 组件。由于每个元素都需要有唯一的标识符,因此通过 `wx:key` 属性指定了元素的值作为唯一标识符。
你可以根据自己的需求修改样式和事件处理函数。
阅读全文