<template>
<view class="page">
<view class="uni-form-item uni-column">
//关键 :key="item.value"
<view v-for="(item,index) in formList" :key="item.value" class="with-fun">
<input class="uni-input" placeholder="请输入" :value="item.inputClearValue" @input="clearInput($event,index)" />
<view class="uni-icon uni-icon-clear" v-if="item.showClearIcon" @click="clearIcon(index)"></view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
formList:[
{'value':0,'label':'选项一',showClearIcon:false,inputClearValue:''},
]
};
},
methods:{
clearInput: function(event,index) {
console.log(event)
//关键 event.target.value
this.formList[index].inputClearValue = event.target.value;
if (event.target.value.length > 0) {
this.formList[index].showClearIcon = true;
} else {
this.formList[index].showClearIcon = false;
}
},
clearIcon: function(index) {
this.formList[index].inputClearValue = '';
this.formList[index].showClearIcon = false;
}
}
}
</script>
<style lang="less">
@import url('Digita_mlining.less');
</style>
uniapp关于绑定属性的使用
最新推荐文章于 2024-05-27 09:10:02 发布