vue.js toggle button code example

Example 1: toggle on-click button vue

<button @click="variable = !variable">
	Toggle Value
</button>

<script>
export default {
  data () {
     return {
       variable: false
     }
  }
}
</script>

Example 2: vue-js-toggle-button config

<template>  <div class="container" style="text-align:center">    <div class="large-12 medium-12 small-12 cell">      <h1 style="font-family:ubuntu">Vue js toggle button example - ItSolutionStuff.com</h1>          <toggle-button @change="onChangeEventHandler" :labels="{checked: 'On', unchecked: 'Off'}" style="margin-left: 20px" />          <toggle-button :labels="{checked: 'Itsolutionstuff.com', unchecked: 'HDTuto.com'}" width="150" style="margin-left: 20px" />          <toggle-button :labels="{checked: 'Yes', unchecked: 'No'}" style="margin-left: 20px" />      </div>  </div></template>  <script>      export default {    data(){      return {        file: ''      }    },      methods: {      onChangeEventHandler(){          alert('hi');      }    }  }</script>

Tags:

Html Example