Directory Structure
Code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.tab ul {
overflow: hidden;
padding: 0;
margin: 0;
}
.tab ul li {
box-sizing: border-box;
padding: 0;
float: left;
width: 100px;
height: 45px;
line-height: 45px;
list-style: none;
text-align: center;
border-top: 1px solid blue;
border-right: 1px solid blue;
}
.tab ul li:first-child {
border-left: 1px solid blue;
}
.tab ul li.active {
background-color: orange;
}
.tab div {
width: 500px;
height: 300px;
display: none;
text-align: center;
font-size: 30px;
line-height: 300px;
border: 1px solid blue;
border-top: 0px;
}
.tab div.current {
display: block;
}
</style>
</head>
<body>
<div id="app">
<div class="tab">
<ul>
<li @click="change(index)" :class="CurrentIndex == index?'active':''" :key='item.id' v-for='( item,index) in list'>{
{item.title}}</li>
</ul>
<div :class="CurrentIndex == index?'current':''" :key="item.id" v-for='(item,index) in list'>
<img :src="item.path" alt="">
</div>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
CurrentIndex: 0,
list: [{
id: 1,
title: 'apple',
path: 'img/apple.png'
}, {
id: 2,
title: 'orange',
path: 'img/orange.png'
}, {
id: 3,
title: 'lemon',
path: 'img/lemon.png'
}]
},
methods: {
change: function(index) {
this.CurrentIndex = index
}
}
});
</script>
</body>
</html>
case study
1. Realize the static UI effect.
Use the traditional way to realize the label structure and style
2. Refactoring UI effects based on data Refactoring
static structure and styles into forms based on Vue template syntax
Processing event binding and js control logic
3. Declarative programming
The structure of the template is basically the same as the final display effect
Summary
1. Pay attention to the use of v-for to traverse an array of objects
:key='item.id' v-for='( item,index) in list'
2. Pay attention to the use of event objects
@click="change(index)
3. Click the switching method of li's current index
//这里的index就是@click="change(index)带回来的index（事件对象）
methods: {
change: function(index) {
this.CurrentIndex = index
}
}