码路教育

04, 指令下

# 04, 指令下

# 1.1, v-for指令

在真实开发中，我们往往会从服务器拿到一组数据，并且需要对其进行渲染。可以使用v-for来完成

  • v-for的基本格式是 "item in 数组"
  • 数组通常是来自data或者prop，也可以是其他方式
  • 如果我们需要索引，可以使用格式： "(item, index) in 数组"
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>

<body>
    <!-- 定义的容器 -->
    <div id="app">
        <ul>
            <!-- v-for写在谁的身上，最终就遍历出多少个谁 -->
            <!-- v-for="(item,index) in data" -->
            <li v-for="(item,index) in students">
                {{ item.name }}  ---  {{ index }}
            </li>
        </ul>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    students: [{
                        id: 1,
                        name: "貂蝉"
                    },
                    {
                        id: 2,
                        name: '妲己'
                    },
                    {
                        id: 3,
                        name: '大桥'
                    },
                    {
                        id: 4,
                        name: '小乔'
                    },
                    {
                        id: 5,
                        name: '周瑜'
                    },
                    {
                        id: 1,
                        name: "貂蝉"
                    },
                    {
                        id: 2,
                        name: '妲己'
                    },
                    {
                        id: 3,
                        name: '大桥'
                    },
                    {
                        id: 4,
                        name: '小乔'
                    },
                    {
                        id: 5,
                        name: '周瑜'
                    }
                    ],
                }
            }
        });
    </script>
</body>
</html>
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

v-for也支持遍历对象

  • 一个参数： "value in object";
  • 二个参数： "(value, key) in object";
  • 三个参数： "(value, key, index) in object";
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>

<body>
    <!-- 定义的容器 -->
    <div id="app">
        <h2>遍历对象</h2>
        <p v-for="value in obj">
            {{value}}
        </p>

        <hr>

        <p v-for="(value,key) in obj">
            {{value}} --- {{key}}
        </p>

        <hr>

        <p v-for="(value,key,index) in obj">
            {{value}} --- {{key}} --- {{index}}
        </p>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    obj: {
                        name: "wangcai",
                        age: 18,
                        sex: '男'
                    }
                }
            }
        });
    </script>
</body>
</html>
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
47
48

v-for同时也支持数字的遍历

  • 每一个item都是一个数字;

v-for也可以遍历其他可迭代对象(Iterable)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <h2>遍历数字</h2>
        <p v-for="(num,index) in 5">
            {{num}} --- {{index}}
        </p>

        <hr>

        <h2>遍历字符串</h2>
        <p v-for="(str,index) in 'ILoveVue'">
            {{str}} --- {{index}}
        </p>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                 
                }
            }
        });
    </script>
</body>
</html>
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

v-for与ref综合练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 1000px;
            height: 50px;
            list-style: none;
            display: flex;
            margin: 10px auto;
            border: 1px solid yellowgreen;
        }

        li {
            flex: 1;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <!-- 定义的容器 -->
    <div id="app">
        <ul>
            <!-- 在vue中，也是可以获取DOM元素的，通过ref，类似于ID-->
            <!-- 现在，你的肉眼看到的是一个li，但是实际是有N个li，每一个li都有对应的索引 -->
            <li v-for="(item,index) in arr" @click="handle(index)" :ref="index">
                {{item.title}} ---- {{index}}
            </li>
        </ul>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    arr: [
                        { id: 1, title: '军事' },
                        { id: 2, title: '游戏' },
                        { id: 3, title: '直播' },
                        { id: 4, title: '财经' },
                        { id: 5, title: '汽车' },
                        { id: 6, title: '娱乐' },
                        { id: 7, title: '生活' },
                        { id: 8, title: '感情' },
                        { id: 9, title: '购物' },
                        { id: 10, title: '美食' },
                    ]
                }
            },
            methods:{
                handle(index){
                    // console.log("index:",index);
                    // console.log(this.$refs[index][0]);
                    this.$refs[index][0].style.background = "gold";
                }
            }
        });
    </script>
</body>
</html>
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

Tab选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .tab-box{
            box-sizing: border-box;
            margin: 20px auto;
            width: 300px;
        }
        .tab-box .tab{
            position: relative;
            top: 1px;
            display: flex;
        }
        .tab-box .tab li{
            list-style: none;
            cursor: pointer;
            border: 1px solid #ddd;
            background-color: #eee;
            padding: 5px 10px;
            margin-right: 10px;
        }
        .tab-box .tab li.active{
            color: lightcoral;
            background-color: #fff;
            border-bottom-color: #fff;
        }
        .tab-box .con{
            display: none;
            box-sizing: border-box;
            padding: 10px;
            height: 100px;
            border: 1px solid #ddd;
        }
        .tab-box .con.active{
            display: block;
        }
    </style>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app" class="tab-box">
        <ul class="tab">
            <!-- 动态绑定class还没有讲 -->
            <li v-for="(item,index) in list" :class="{ active: selected === index }" @click="change(index)">{{item.title}}</li>
        </ul>
        <div v-for="(item,index) in list" class="con" :class="{ active: selected === index }">
            {{item.content}}
        </div>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    list: [
                        { id: 1, title: "音乐", content: "成都-赵雷" },
                        { id: 2, title: "电影", content: "新蝙蝠侠" },
                        { id: 3, title: "电视剧", content: "甄嬛传" },
                    ],
                    selected:0
                }
            },
            methods:{
                change(index){
                    if(index === this.selected) return;
                    this.selected = index;
                }
            }
        });
    </script>
</body>
</html>
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
Last Updated: 12/25/2022, 10:02:14 PM

05-计算属性，侦听器