vue中动态改变样式(点击事件:导航栏的经典写法)
原创
©著作权归作者所有:来自51CTO博客作者wx6375cd1abf2fb的原创作品,请联系作者获取转载授权,否则将追究法律责任
vue中动态改变样式——点击事件:导航栏的经典写法
vue中数据的更新可以导致页面的重构,因此提供了一种导航栏的新思路。
<!-- 导航 -->
template:
<div class="nav_bar">
<span v-for="(item,i) in navigationBar" :key="i"
:class="item.type == navHeader ? 'spanItem' : '' "
@click="_changeHeader(item)">
{{item.title}}
</span>
</div>
data:
data() {
return {
navigationBar: [
{title:"综合能力",type:"zonghe"},
{title:"软件能力",type:"ruanjian"},
{title:"业务能力",type:"yewu"},
{title:"技能能力",type:"jineng"},
{title:"文化能力",type:"wenhua"},
{title:"爱好能力",type:"aihao"}
],
navHeader: "zonghe"
};
},
methods:
methods: {
_changeHeader(item) {
this.navHeader = item.type
//FIXME:此处进行判断进行一个 路由跳转
}
},
style:
.spanItem {
width: 16.666%;
height: 34px;
text-align: center;
line-height: 34px;
margin-top: -3px;
background: linear-gradient(-26deg, #56b1ff, #48fffd);
border-radius: 20px;
font-size: 20px;
font-family: AliHYAiHei;
font-weight: 400;
font-style: italic;
color: #ffffff;
text-shadow: 0px 1px 3px rgba(9, 26, 41, 0.32);
}