会python真的可以为所欲为0(回)
356天前
这里还有人吗1(回)
541天前这里还有人吗0(回)
541天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
766天前到处都是羊，不想上班0(回)
846天前
鸽子
0(回)
850天前<!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> |
