vue.js--Tab选项卡

vue.js--Tab选项卡_第1张图片

代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        *{padding: 0;margin: 0}
        #app{
            width: 500px;height: 300px;margin: 0 auto;background-color: #ddd;
        }
        .top{
            height: 50px;line-height: 50px;width: 100%;background-color: #999;
        }
        .top ul li{display: inline-block;margin:0 10px;}
        .top ul li a{text-decoration: none;color: white;}
        .bottom{

        }
    style>
head>
<body>
    <div id="app">
        <div class="top">
            <ul>
                <li><a href="javascript:;" @click='tabToggle(tab01Text);'>{{tab01Text}}a>li>
                <li><a href="javascript:;" @click='tabToggle(tab02Text);'>{{tab02Text}}a>li>
                <li><a href="javascript:;" @click='tabToggle(tab03Text);'>{{tab03Text}}a>li>
            ul>
        div>
        <div class="bottom">
            <component :is='currentView' keep-alive>component>
        div>
    div>
    <script type="text/javascript" src='vue.js'>script>
    <script>
        var tab01 = Vue.extend({
            template:'

This is tab01

'
}) var tab02 = Vue.extend({ template:'

This is tab02

'
}) var tab03 = Vue.extend({ template:'

This is tab03

'
}) var app = new Vue({ el:'#app', data:{ tab01Text:'tab01', tab02Text:'tab02', tab03Text:'tab03', currentView:'tab01' }, components:{ tab01:tab01, tab02:tab02, tab03:tab03 }, methods:{ tabToggle:function(tabText){ this.currentView=tabText } } })
script> body> html>

你可能感兴趣的:(Vue.js)