Каждый раз, когда мне нужно использовать элемент флажка с настраиваемыми стилями в проекте VueJS, я набираю настраиваемый флажок в строке поиска и перехожу на this учебник w3schools. Затем просто скопируйте, вставьте, поработайте со стилями и вуаля!

Что ж, это требует времени каждый раз, так что вот моя самая простая и чистая адаптация полностью настраиваемого и многоразового компонента флажка Vue.JS.

Назовем его Checkbox.vue:

Затем просто импортируйте Checkbox.vue в родительский компонент и привяжите его значение с помощью директивы v-model:

Любые улучшения приветствуются здесь!

Надеюсь, это кому-то поможет. Ваше здоровье!

PS: Если вам нужен пример React, вы можете найти его здесь.