vue入门基础1，助解原码

从html开始看–>js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

li{
    width: 200px;
    height: 20px;
    line-height: 20px;
    border-bottom: 1px solid #333;
}
/* .item--color{
    background:green;
} */
.tab{
    color: red;
}
.list--item{
    width: 100px;
    height: 50px;
    margin: 0 auto;
}
.p--color{
    background: orange;
    text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
    <div id="list">
        <ul>
            <li 
            class="item" 

            :class="{ 'item--color' : curItem === index}"
            
            v-for="(item,index) in 5"

            @click="color(index)"

            :key='item'

            :style="styleObj"
            >{{ item }}</li>
        </ul>
<hr>
//首页列表也跳转
        <button
        :class="{'tab': curTab ===item.id}"

        v-for="item in tabs"

        :key='item.id'

        @click="turn(item.id)"

        >{{item.name}}</button>

        <div v-if=" curTab === 'home' ">
            <h1>首页</h1>
        </div>
        <div v-if="curTab === 'list'">
            <h1>列表页</h1>
        </div>
<hr>
//enter变色
        <div class="list--item">
            <p
            :class="{'p--color':curItem === p.id}"
            v-for="p in listItem"
            :key="p.id"
            @mouseenter="over(p.id)"
            >{{p.name}}</p>
        </div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
        el:'#list',
        data:{
            curItem:0,
            styleObj:{
                color:'red',
                background: 'rgba(120,150,255)',
                fontSize:"20px"
            },
            style:{
                background:'origin'
            },
            curTab:"home",
            tabs:[
                {id:'home',name:'首页'},
                {id:'list',name:'列表页'}
            ],
            listItem:[
                {id:1,name:'李蕾'},
                {id:2,name:'李明'},
                {id:3,name:'李良'},
                {id:4,name:'李华'}
            ]
        },
        methods:{
            color(index){
                this.curItem=index;
            },
            turn(id){
                this.curTab=id;
            },
            over(index){
                this.curItem=index;
            }
        }
    })
</script>
Share
2 min. read