Vue.js实现标签切换效果-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue标签切换</title>
    <style type="text/css">
        .tab{
            width: 360px;
            height: 260px;
            border:1px solid #000;
            margin:100px auto;
        }
        .tab .hd{overflow: hidden;}
        .tab .hd span{
            float: left;
            width: 120px;
            height: 40px;
            line-height: 40px;
            background-color:#ccc;
            text-align: center;
        }
        .tab .hd span.cur{
            background-color: orange;
        }
        .tab .bd div{
            padding:20px;
        }
    </style>
</head>
<body>
<div class="tab">
    <div class="hd">
        <span v-bind:class="{cur:lanmu=='xinwen'}" v-on:click="change('xinwen')">新闻</span>
        <span v-bind:class="{cur:lanmu=='tupian'}" v-on:click="change('tupian')">图片</span>
        <span v-bind:class="{cur:lanmu=='junshi'}" v-on:click="change('junshi')">军事</span>
    </div>
    <div class="bd">
        <div class="xinwen" v-if="lanmu=='xinwen'">我是新闻</div>
        <div class="tupian" v-if="lanmu=='tupian'">我是图片</div>
        <div class="junshi" v-if="lanmu=='junshi'">我是军事</div>
    </div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
new Vue({
    el:".tab",
    data:{
        lanmu:"xinwen"
    },
    methods:{
        change:function(str){
            this.lanmu = str;
        }
    }
});
</script>
</body>
</html>