JSFiddle - React, Tailwind, and code Playground

by Ardani Rohman

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
<p>Input</p>
<input type="text" v-model="name" />
result : {{name}}
<br>
<button type="button" v-on:click="setName()">Set Name with skyshi</button>
<hr/>
<p>Checkbox</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<hr/>
<p>Multi Checkbox</p>
<input type="checkbox" id="checkbox" v-model="multiCheckbox" value="eka">eka
<input type="checkbox" id="checkbox" v-model="multiCheckbox" value="dwi">dwi
<input type="checkbox" id="checkbox" v-model="multiCheckbox" value="tri">tri
<input type="checkbox" id="checkbox" v-model="multiCheckbox" value="catur">catur
<br>
result : {{ multiCheckbox }}
<hr/>
<select v-model="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
result: {{select}}
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    name:"",
    checked: true,
    multiCheckbox: [],
    select:3
  },
  methods: {
    setName: function() {
      this.name = "Skyshi"
    }
  }
})