Input

输入框

radio-group

单项选择器,内部由多个<radio/>组成。

bindchange
  • 类型:EventHandle
  • 默认值:无
  • 说明:<radio-group/> 中的选中项发生变化时触发 change 事件,event.mp.detail = {value: 选中项radio的value}

radio

单选项目

mpvue框架中使用

  1. <template>
  2. <divclass="page">
  3. <radio-group @change="radioChange">
  4. <labelclass="weui-cell weui-check__label"v-for="item in radioItems" :key="index">
  5. <radioclass="weui-check" :value="item.value" :checked="item.checked"/>
  6. <divclass="weui-cell__bd">{{item.name}}</div>
  7. <divclass="weui-cell__ft weui-cell__ft_in-radio"v-if="item.checked">
  8. <iconclass="weui-icon-radio"type="success_no_circle"size="16"></icon>
  9. </div>
  10. </label>
  11. </radio-group>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. exportdefault{
  17. data(){
  18. return{
  19. radioItems:[
  20. { name:'cell standard', value:'0'},
  21. { name:'cell standard', value:'1', checked:true}
  22. ],
  23. }
  24. },
  25. methods:{
  26. radioChange(e){
  27. console.log('radio 携带的值为:'+ e.mp.detail.value);
  28. let radioItems =this.radioItems;
  29. for(let i =0; i < radioItems.length;++i){
  30. radioItems[i].checked = radioItems[i].value === e.mp.detail.value;
  31. }
  32. this.radioItems = radioItems;
  33. }
  34. }
  35. }
  36. </script>
  37. <style>
  38. .nones {
  39. color: red;
  40. }
  41. </style>

input01

踩坑

!> 1.<radio-group>中的bindchange要写成@change="radioChange"

!> 2.<radio>中的value要写成:value="item.value",checked要写成 :checked="item.checked",vue 中数据绑定的写法

!> 3.radioChange返回选中值获取方法为:e.mp.detail.value,而小程序中的写法是e.detail.value

checkbox-group

多项选择器,内部由多个checkbox组成。

bindchange
  • 类型:EventHandle
  • 默认值:无
  • 说明:<checkbox-group/>中选中项发生改变是触发 change 事件,mp.detail = {value:[选中的checkbox的value的数组]}

checkbox

多选项目。

  1. <template>
  2. <divclass="page">
  3. <checkbox-group @change="checkboxChange">
  4. <labelclass="weui-cell weui-check__label"v-for="item in checkboxItems" :key="index">
  5. <checkboxclass="weui-check" :value="item.value" :checked="item.checked"/>
  6. <divclass="weui-cell__hd weui-check__hd_in-checkbox">
  7. <iconclass="weui-icon-checkbox_circle"type="circle"size="23"v-if="!item.checked"></icon>
  8. <iconclass="weui-icon-checkbox_success"type="success"size="23"v-if="item.checked"></icon>
  9. </div>
  10. <divclass="weui-cell__bd">{{item.name}}</div>
  11. </label>
  12. </checkbox-group>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. exportdefault{
  18. data(){
  19. return{
  20. checkboxItems:[
  21. { name:'standard is dealt for u.', value:'0', checked:true},
  22. { name:'standard is dealicient for u.', value:'1', checked:false}
  23. ],
  24. }
  25. },
  26. methods:{
  27. checkboxChange(e){
  28. console.log('checkbox发生change事件,携带value值为:'+ e.mp.detail.value);
  29. var checkboxItems =this.checkboxItems, values = e.mp.detail.value;
  30. for(var i =0, lenI = checkboxItems.length; i < lenI;++i){
  31. checkboxItems[i].checked =false;
  32. for(var j =0, lenJ = values.length; j < lenJ;++j){
  33. if(checkboxItems[i].value == values[j]){
  34. checkboxItems[i].checked =true;
  35. break;
  36. }
  37. }
  38. }
  39. this.checkboxItems = checkboxItems;
  40. }
  41. }
  42. }
  43. </script>
  44. <style>
  45. .nones {
  46. color: red;
  47. }
  48. </style>

input02

踩坑

!> 与radio差不多,都是一些写法的问题,看下示例代码应该就可以明白。

switch

开关选择器。

bindchange
  • 类型:EventHandle
  • 默认值:无
  • 说明:checked 改变时触发 change 事件,event.mp.detail={ value:checked}
  1. <template>
  2. <divclass="page">
  3. <divclass="weui-cells__title">开关</div>
  4. <divclass="weui-cells weui-cells_after-title">
  5. <divclass="weui-cell weui-cell_switch">
  6. <divclass="weui-cell__bd">标题文字</div>
  7. <divclass="weui-cell__ft">
  8. <switchchecked @change="switchChange"/>
  9. </div>
  10. </div>
  11. </div>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. exportdefault{
  17. data(){
  18. return{
  19. }
  20. },
  21. methods:{
  22. switchChange(e){
  23. console.log("switch发生change事件,携带value值为:"+ e.mp.detail.value);
  24. }
  25. }
  26. }
  27. </script>
  28. <style>
  29. .nones {
  30. color: red;
  31. }
  32. </style>

input03

踩坑

!> 与radiocheckbox差不多,都是一些写法的问题,看下示例代码应该就可以明白。