1. 效果
先做个简易版本 因为简易版本不需要做图。长的跟下面一样...
2. 实现
css
#wrap {
height: 50vh;
width: 50vw;
display: flex;
flex-direction: column;
}
#header {
display: flex;
flex-grow: 1;
justify-content: space-between;
background-color: ghostwhite;
}
.tag {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
#footer {
display: flex;
flex-grow: 9;
justify-content: center;
align-items: center;
background-color: pink;
}
html
<div id="wrap">
<div id="header">
<div class="tag" @click="curId='html'" style="background-color: lightcoral;">html</div>
<div class="tag" @click="curId='css'" style="background-color: lightblue;">css</div>
<div class="tag" @click="curId='js'" style="background-color: #d4c835;">js</div>
<div class="tag" @click="curId='xml'" style="background-color: lightgoldenrodyellow;">xml</div>
</div>
<div id="footer">{{curId}}</div>
</div>
js
const vm = new Vue({
el: '#wrap',
data: {
curId: 'html'
}
})
3. 总结
@是v-on的缩写,v-on == jquery.on,用于绑定事件的。
{{}}用来让数据回显到视图的。
vue是视图–视图模型–数据的框架,不牵扯dom操作。