CheckBoxExample.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <h1>复选框(默认值false)</h1>
  3. <div>
  4. <div>
  5. <Checkbox
  6. v-model:value="value1"
  7. name="value1"
  8. />
  9. </div>
  10. <div>
  11. {{ value1 }}
  12. </div>
  13. </div>
  14. <h1>复选框(默认值true)</h1>
  15. <div>
  16. <div>
  17. <Checkbox
  18. v-model:value="value2"
  19. name="value2"
  20. />
  21. </div>
  22. <div>
  23. {{ value2 }}
  24. </div>
  25. </div>
  26. <h1>复选框(只读)</h1>
  27. <div>
  28. <div>
  29. <Checkbox
  30. :disabled="true"
  31. name="value2"
  32. />
  33. </div>
  34. <div>
  35. {{ value2 }}
  36. </div>
  37. </div>
  38. <h1>复选框(必填)</h1>
  39. <div>
  40. <div>
  41. <Checkbox
  42. :required="true"
  43. name="value2"
  44. />
  45. </div>
  46. <div>
  47. {{ value2 }}
  48. </div>
  49. </div>
  50. </template>
  51. <script>
  52. import { defineComponent, ref } from 'vue';
  53. import Checkbox from '@/checkbox/src/Checkbox.vue';
  54. export default defineComponent({
  55. components: {
  56. 'Checkbox': Checkbox,
  57. },
  58. setup() {
  59. const value1 = ref(false);
  60. const value2 = ref(true);
  61. return {
  62. value1, value2,
  63. };
  64. },
  65. });
  66. </script>