JSFiddle - React, Tailwind, and code Playground

by GopsAB

HTML

<div  id="app1">
  <div v-if="showme" id="app2">
  IF is true
  </div>
  <div v-else-if="ishidden" id="app3">
  Else-if is happening
  </div>
  <div v-else>
     I am the last else
  </div>
</div>


<div id="app4">
  <template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>
</div>

<div id="app5">
<template v-if="isUserName">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>
<button v-on:click="otherOption">Other Option</button>
</div>

JavaScript

var vm = new Vue({
"el":"#app1",
"data":{
 showme:false,
 ishidden:false
}
})


new Vue({
"el":"#app4",
"data":{
 ok:true
}
})



new Vue({
"el":"#app5",
"data":{
 isUserName: true
},
"methods":{
 "otherOption": function(){
   this.isUserName = !this.isUserName
 }
}
})