uviews 单选框选择“其他”添加输入框

小前端

已于 2024-01-15 12:22:06 修改

阅读量532

点赞数 7

文章标签： javascript

于 2024-01-05 11:31:13 首次发布

本文链接：https://blog.csdn.net/weixin_45041493/article/details/135405109

版权

文章介绍了如何在Vue.js的表格中，当选择其他选项时动态添加文本输入框，以便用户输入详细描述。展示了单选和多选框的代码示例及其数据绑定和条件渲染的使用。

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

表格进行前后台交互的过程中，当我们选中其他的时候，有时候需要可以在其他后面追加文本输入框，直接上代码

<u-radio-group v-model="itemValue" placement="column" >
	<view class="" v-for="(item, i) in itemContent" :key="index">
		<u-radio :customStyle="{marginBottom: '20rpx'}" :label="item" :name="item">
		</u-radio>
	</view>
</u-radio-group>
<u--input placeholder="其他-具体描述" v-model="remark" class="cc_input" v-if="itemValue=='其他'"></u--input>
<script>
data(){
	return {
		itemContent:['选项1','选项2','选项3','选项4','其他'],//单选内容
		itemValue:'',//选中的结果
		remark:'',//其他的输入框值
		
	}
}
</script>

复选框同理代码如下

<u-checkbox-group v-model="itemValue" placement="column">
	<view v-for="(item, i) in itemContent" :key="index" >
		<u-checkbox :customStyle="{marginBottom: '20rpx'}" :label="item.optionName" :name="item.optionName">
							</u-checkbox>
		<u--input placeholder="其他具体描述" v-model="submitData[index].remark" class="cc_input" v-if="itemValue.indexOf('其他')!= -1"></u--input>
						</view>
		</u-checkbox-group>


<script>
data(){
	return {
		itemContent:['选项1','选项2','选项3','选项4','其他'],//单选内容
		itemValue:[],//选中的结果
		remark:'',//其他的输入框值
		
	}
}
</script>