src目录下新建components目录 从uni-ui引入对应的组件目录，如下图 直接使用组件，demo < template>
< view id= "my" data- name= "王五" data- age= "18" > my页面< / view>
< uni- data- select
: localdata= "localdata"
: value= "valueGender"
clear
placeholder= "请选择性别"
@change= "handleChangeGender"
/ >
< uni- datetime- picker / >
< uni- form>
< uni- form- item label= "姓名" >
< input v- model= "name" type= "text" placeholder= "请输入姓名" / >
< / uni- form- item>
< uni- form- item label= "年龄" >
< input type= "number" v- model= "age" placeholder= "请输入年龄" / >
< / uni- form- item>
< uni- form- item label= "性别" >
< radio- group : value= "gender" @change= "handleGender" >
< radio value= "11" > 男< / radio>
< radio value= "22" > 女< / radio>
< radio value= "33" > 未知< / radio>
< / radio- group>
< / uni- form- item>
< uni- form- item label= "爱好" >
< checkbox- group : value= "hobbies" @change= "handleHobbies" >
< checkbox value= "11" > 篮球< / checkbox>
< checkbox value= "22" > 足球< / checkbox>
< checkbox value= "33" > 乒乓球< / checkbox>
< / checkbox- group>
< / uni- form- item>
< uni- form- item label= "城市" >
< uni- data- select
: localdata= "localdataCity"
: value= "valueCity"
clear
placeholder= "请选择城市"
@change= "handleChangeCity"
/ >
< / uni- form- item>
< uni- form- item label= "日期" >
< uni- datetime- picker v- model= "date" type= "date" / >
< / uni- form- item>
< uni- form- item label= "时间" >
< uni- datetime- picker v- model= "time" type= "time" / >
< / uni- form- item>
< uni- form- item label= "滑块" >
< slider value= "0" @change= "sliderChange" show- value / >
< / uni- form- item>
< uni- form- item label= "开关" >
< switch @change= "handleSwitch" / >
< / uni- form- item>
< uni- form- item label= "文本域" >
< textarea v- model= "textarea" placeholder= "请输入文本" / >
< / uni- form- item>
< uni- form- item label= "图片" >
< image src= "/static/logo.png" / >
< / uni- form- item>
< uni- form- item label= "视频" >
< audio src= "/static/mp-weixin/qq提示音.mp3" controls / >
< / uni- form- item>
< uni- form- item>
< button type= "primary" @click= "handleClick" > 提交< / button>
< / uni- form- item>
< / uni- form>
< / template>
< script>
export default {
data ( ) {
return {
localdata : [
{ text : "男" , value : 11 } ,
{ text : "女" , value : 22 } ,
{ text : "未知" , value : 33 } ,
] ,
valueGender : "" ,
name : "" ,
age : "" ,
gender : "" ,
hobbies : [ ] ,
localdataCity : [
{ text : "北京" , value : 11 } ,
{ text : "上海" , value : 22 } ,
{ text : "广州" , value : 33 } ,
] ,
valueCity : "" ,
date : "" ,
time : "" ,
sliderValue : 0 ,
checked : false ,
textarea : ""
}
} ,
onLoad ( ) {
} ,
onPullDownRefresh ( ) {
setTimeout ( ( ) => {
uni. stopPullDownRefresh ( )
} , 1000 )
} ,
mounted ( ) {
} ,
methods : {
handleSwitch ( e ) {
this . checked = e. detail. value
} ,
sliderChange ( e ) {
this . sliderValue = e. detail. value
} ,
handleChangeGender ( e ) {
this . value = e
console. log ( this . value)
} ,
handleClick ( ) {
console. log ( this . textarea)
} ,
handleGender ( e ) {
this . gender = e. target. value
} ,
handleHobbies ( e ) {
this . hobbies = e. target. value
} ,
handleChangeCity ( e ) {
this . valueCity = e
console. log ( this . valueCity)
}
}
}
< / script>
< style scoped>
< / style>
