uni-app概要 |
通过 HBuilderX 可视化界面 |
通过 HBuilderX发布为小程序 |
通过vue-cli命令行运行uni app项目 |
框架简介 |
使用Vue.js注意事项 |
uni-app 常见问题 |
当前阅读教程:Uni-app入门教程 > uni-app 表单控件绑定 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: uni-app 事件处理器 | 下一篇: uni-app Vue 组件 |
支持 Vue官方文档 :表单控件绑定。 建议开发过程中直接使用 uni-app:表单组件。用法示例 : H5 的select 标签用 picker 组件进行代替 <template> <view> <picker @change="bindPickerChange" :value="index" :range="array"> <view> 当前选择:{{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 @change="radioChange"> <label 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>
v-html指令App端(vue页面V3编译模式)和H5端支持v-html,其他端不支持v-html。 |
|
上一篇: uni-app 事件处理器 | 下一篇: uni-app Vue 组件 |