VUE基本指令v-if v-show v-for


指令directive：vue指令的作用是通过带有 v- 的特殊属性，实现对DOM的响应式加载
1、v-if：通过布尔表达式进行对DOM的上树和下树的渲染

例1

1
2
 <h1 v-if="true">v-if的基本使用</h1>
 <h1 v-if="false">v-if的基本使用</h1>

工作中不是使用布尔值直接渲染，而是通过data带有布尔值进行渲染

例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <div id="app">
        <h1 v-if="bool">通过data带的布尔值进行判断</h1>
        <h1 v-if="!bool">通过data带的布尔值进行判断</h1>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            bool: true
        }
    })
</script>

v-if="bool" 上树 v-if="!bool" 不上树

v-if 的显示根本原理

1、通过对值的隐式转换

2、通过对表达式的判断得出的布尔值得来的

例3

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
<body>
    <div id="app">

        <h1>{<!-- -->{num}}</h1>
        <p v-if="num>=0 && num<10">0-10显示</p>
        <p v-else-if="num>=10 && num<20">10-20显示</p>
        <p v-else-if="num>=20 && num<30">20-30显示</p>
        <p v-else="num>=30">30以上显示</p>
        <button @click="add">++</button>
        <button @click="Reduction">--</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            num: 0
        },
        methods: {
            add() {
                this.num++;
            },
            Reduction() {
                this.num--;
            }
        }
    })
</script>

通过v-if和v-else-if和v-else进行分支判断

v-else 的使用前提，必须是先有v-if 中间不能有仍和元素间隔

0-10显示

中间元素

30以上显示

2、v-show：v-show和v-if情况类似 ，但原理不一样，v-show 是通过对元素的display属性控制的，并没有实现元素的下树

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
<body>
    <div id="app">
        <h1>num：{<!-- -->{num}}</h1>
        <h1 v-show="num>=0 && num<10">0-10显示</h1>
        <h1 v-show="num>=10 && num<20">10-20显示</h1>
        <h1 v-show="num>=20">20以上显示</h1>
        <button @click="add">++</button>
        <button @click="reduction">--</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            num: 0
        },
        methods: {
            add() {
                this.num++;
            },
            reduction() {
                this.num--;
            }
        }
    })
</script>

v-show和v-if 的使用场景：如果切换特别频繁使用v-show，如果页面设计范围大且不是特别频繁的切换使用v-if，主要区分设计页面的性能。

3、v-for：循环指令，遍历数组或对象的每一个值

例：遍历数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
        <ul>
            <li v-for="items in arr">{<!-- -->{items}}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                arr: ["足球", "篮球", "排球", "乒乓球"]
            }
        })
    </script>

v-for的index和key 属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <div id="app">
        <ul>
            <li v-for="(items,index) in arr" :key="index">{<!-- -->{index}}-{<!-- -->{items}}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                arr: ["足球", "篮球", "排球", "乒乓球"]
            }
        })
    </script>

items：指的是遍历数组或对象中的每一个值，items的命名不是规定的，可以自定义命名

index：每一项被遍历的下标索引值

key ： 给每一项值添加元素标识，作用是为了区分元素，实现最小量的更新

例：遍历对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  <div id="app">
        <ul>
            <li v-for="(people,key,index) in sutdent" :key="index">{<!-- -->{key}}---{<!-- -->{index}}---{<!-- -->{people}}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                sutdent: {
                    name: "张三",
                    age: "18岁",
                    sex: "男",
                    class: "高三8班"
                }
            }
        })
    </script>

people ：对象的内容

key：表示对象的key键值名称

index：当前对象的下标索引值

例：工作中遍历JSON更多

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
<div id="app">
        <table>
            <tr v-for="(items,index) in students" :key="index">
                <td>{<!-- -->{index}}-{<!-- -->{items.name}}</td>
                <td>{<!-- -->{index}}-{<!-- -->{items.age}}</td>
                <td>{<!-- -->{index}}-{<!-- -->{items.sex}}</td>
            </tr>
        </table>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                students: [{
                        name: "张三",
                        age: "18岁",
                        sex: "男"
                    },
                    {
                        name: "李四",
                        age: "20岁",
                        sex: "女"
                    },
                    {
                        name: "王五",
                        age: "19岁",
                        sex: "男"
                    },
                    {
                        name: "赵柳",
                        age: "22岁",
                        sex: "男"
                    },
                ]
            }
        })
    </script>

例 JSON的嵌套使用 九九乘法表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <div id="app">
        <table>
            <tr v-for="i in num" :key="i">
                <td v-for="j in i" :key="j">
                    {<!-- -->{i}} X {<!-- -->{j}} = {<!-- -->{i*j}}
                </td>
            </tr>
        </table>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                num: [1, 2, 3, 4, 5, 6, 7, 8, 9]
            }
        })
    </script>

v-for 遍历出来的不是数据，而是元素

v-for 使用items和index的时候一定要使用括号抱起来