<div id='app'>
  {{message}}
  <div>
    <input type='button' value='测试' @click='testMethod'>
  </div>
  <ul class="nav nav-tabs"  >
    <li role="presentation" 
        v-for='tab in tabs' 
        :class="[{active:currentTab === tab}]" 
        @click='currentTab = tab'>
      <a href="#">{{tab}}</a>
    </li>

  </ul>
  <component
    v-bind:is="currentTabComponent"
    class="tab"
  ></component>
</div>

Vue.component('tab-home', {
  template: '<div>Home component</div>'
});
Vue.component('tab-profile', {
  template: '<div>Profile component</div>'
});
Vue.component('tab-messages', {
  template: '<div>Messages component</div>'
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World！',
    currentTab: 'Home',
    tabs: ['Home', 'Profile', 'Messages']
  },
  methods: {
    testMethod: function() { 
      // swal("Hello world!");
      // swal("标题", "内容");
      swal("Good job!", "You clicked the button!", "success"); //info error warning
      // swal("Click on either the button or outside the modal.")
      //   .then((value) => {
      //   swal(`The returned value is: $ {
      //     value
      //   }`);
      // });
    }
  },
  computed: {
    currentTabComponent: function() {
      return 'tab-' + this.currentTab.toLowerCase()
    }
  }
});