位置:电子教程 > Uni-app入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
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:表单组件。用法示例

小白教程网www.2d5.net

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 组件
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)