JSFiddle - React, Tailwind, and code Playground

by All Laravel

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <h1 v-if="user.gender == 1 && user.name != null" style="color: red;">Chào anh {{ user.name }}</h1>
  <h1 v-else-if="user.gender == 2 && user.name != null" style="color: green">Chào chị {{ user.name }}</h1>
  <h1 v-else style="color: blue">Ví dụ về v-if</h1>
  <br>
  <label>Họ và tên</label>
  <input v-model="user.name" placeholder="Nhập vào tên bạn">
  <br>
  <label>Giới tính</label>
  <select v-model="user.gender">
    <option value="1">Nam</option>
    <option value="2">Nữ</option>
  </select>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    user: {}
  }
})