JSFiddle - React, Tailwind, and code Playground

by kevin0117

HTML

<div id="app">
  <h4>v-if 與 v-show 的差異</h4>
  <!-- v-show 是透過 style 的 display: none; 來切換顯示與否 -->
  <!-- v-if 則是直接將 dom 元素移除, ㄧ次就只會顯示其中ㄧ個 dom 元素 -->
  <div class="alert alert-success" v-show="isSuccess">v-show: 成功!</div>
  <div class="alert alert-danger" v-show="!isSuccess">v-show: 失敗!</div>
  <br>
  <div class="alert alert-success" v-if="isSuccess">v-if: 成功!</div>
  <div class="alert alert-danger" v-else>v-if: 失敗!</div>
  <br>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="isSuccess2" v-model="isSuccess">
    <label class="form-check-label" for="isSuccess2">啟用元素狀態</label>
  </div>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    isSuccess: true,
    showTemplate: true,

    link: 'a',

    loginType: 'username'
  },
  methods: {
    toggleLoginType: function () {
      return this.loginType = this.loginType === 'username' ? 'email' : 'username'
    }
  }
});