用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

vue.js选项卡

2016-10-18 作者:云代码会员举报

[javascript]代码库

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
	*{
	margin:0;
	padding:0;
}
#main{
    width:432px;
    margin:0 auto;
    text-align:center;
}
nav{
	display:inline-block;
	margin:60px auto 45px;
	background-color:#5597b4;
	box-shadow:0 1px 1px #ccc;
	border-radius:2px;
}
nav a{
	display:inline-block;
	padding: 18px 30px;
	color:#fff !important;
	font-weight:bold;
	font-size:16px;
	text-decoration:none !important;
	line-height:1;
	background-color:transparent;
	-webkit-transition:background-color 0.25s;
	-moz-transition:background-color 0.25s;
	transition:background-color 0.25s;
    cursor:pointer;
}
b{
    display:inline-block;
	padding:5px 10px;
	background-color:#c4d7e0;
	border-radius:2px;
	font-size:18px;
}
.show{
    background-color:#e35885;
}

</style>
</head>
<body>
    <div id="main">
    <nav @click.prevent>
        <a v-for="item in items" :class="{'show': item.active}" @click="makeActive(item, $index)">{{item.name}}</a>
    </nav>
    <p>You chose <b>{{active}}</b></p>
</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
	el:'#main',
    data:{
    	active:'HTML',
    	items:[
        	{name:'HTML', active:true},
            {name:'CSS', active:false},
            {name:'JavaScript', active:false},
            {name:'Vue.js', active:false}
        ]
    },
    methods: {
		makeActive: function(item, index){
			this.active = item.name;
            for(var i=0; i<this.items.length;i++){
            	this.items[i].active = false;
            }
            this.items[index].active = true;
		}
	}
});
</script>
</html>


分享到:
更多

网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。