- H5 的
select
標簽用 picker
組件進行代替 https://uniapp.dcloud.io/component/button
<template> <view> <picker @change="bindPickerChange" :value="index" :range="array"> <view class="picker"> 當前選擇:{{array[index]}} </view> </picker> </view> </template> <script> export default { data() { return { index: 0, array: ['A', 'B', 'C'] } }, methods: { bindPickerChange(e) { console.log(e) } } } </script>
- 表單元素
radio
用 radio-group
組件進行代替
<template> <view> <radio-group class="radio-group" @change="radioChange"> <label class="radio" v-for="(item, index) in items" :key="item.name"> <radio :value="item.name" :checked="item.checked" /> {{item.value}} </label> </radio-group> </view> </template> <script> export default { data() { return { items: [{ name: 'USA', value: '美國' }, { name: 'CHN', value: '中國', checked: 'true' }, { name: 'BRA', value: '巴西' }, { name: 'JPN', value: '日本' }, { name: 'ENG', value: '英國' }, { name: 'TUR', value: '法國' } ] } }, methods: { radioChange(e) { console.log('radio發生change事件,攜帶value值為:', e.target.value) } } } </script>