[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>
会python真的可以为所欲为0(回)
250天前
这里还有人吗1(回)
435天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
660天前
鸽子
0(回)
744天前