<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()
}
}
});