uniapp单选按钮的使用

分手后的思念是犯贱 2023-01-02 01:27 407阅读 0赞

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70]  
代码截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20210104090412453.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 3]  
console.log(evt.detail) 可以获取我点击的值

<template>
    	<view>
    		<view style="display: flex;width: 100%;text-align: center;">
    			<view v-for="(i, index) in list" :key="index" @click="changeys(index)" :class="['w_25', changeid == index + 1 ? 'yscss' : 'w_25']">{ {  i }}</view>
    		</view>
    		
    		<view v-if="changeid == 1">
    			
    			<view>
    			</view>
    			<view>
    				<radio-group @change="radioChange" style="display: flex;flex-direction: column;line-height: 100rpx ;">
    					<label v-for="(item, index) in items" :key="item.value">
    						<radio :value="item.value" :checked="index === current" />
    						<text>{ { item.name}}</text>
    					</label>
    				</radio-group>
    			</view>
    			
    		</view>
    	</view>
    </template>
    <script>
    export default { 
    	data() { 
    		return { 
    			current: 0,
    			list: ['a', 'b', 'c', 'd'],
    			changeid: 1,
    			money: 0,
    			showxq2: false,
    			items: [
    				{ 
    					value: 'aa',
    					name: 'A卡'
    				},
    				{ 
    					value: 'bb',
    					name: 'B卡',
    					checked: 'true'
    				},
    				{ 
    					value: 'cc',
    					name: 'C卡'
    				}
    			]
    		};
    	},
    	methods: { 
    		radioChange: function(evt) { 
    			for (let i = 0; i < this.items.length; i++) { 
    				if (this.items[i].value === evt.target.value) { 
    					this.current = i;
    					break;
    				}
    			}
    		},
    		changeys(index) { 
    			this.changeid = index + 1;
    		},
    		xq2() { 
    			if (this.showxq2 == false) { 
    				this.showxq2 = true;
    			} else { 
    				this.showxq2 = false;
    			}
    		}
    	}
    };
    </script>
    
    <style>
    .w_25 { 
    	width: 25%;
    }
    .yscss { 
    	border-bottom: 2px solid #007aff;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70]: /images/20221120/01eba9b9d2384648a1279bf901ccaabb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 1]: /images/20221120/9bdd69d6b045434395994132e84f021d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 2]: /images/20221120/28547a632a8e4e4a9cd153d1c6108d8d.png
[20210104090412453.png]: /images/20221120/6370b55d90a24f1193fa1c24037807b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 3]: /images/20221120/62f56304a27741c0a242f76dc18a968d.png