Vue第三讲

条件渲染

Vue中提供了 v-if、v-else、v-else-if 来实现条件渲染。

v-if 和 v-show 的区别：

（1）v-if是通过控制元素是否在DOM节点中渲染，来决定元素的显示或隐藏；

（2）v-show是通过控制元素的display的CSS样式，来决定元素的显示或隐藏。

当我们需要频繁的进行显示/隐藏的切换时，用v-show，否则就用v-if。

列表渲染

有四种可以渲染：数组、对象、字符串、数字。

1.数组：

        <ul>
            <li v-for="(item,index) in students">{{index}}-{{item.name}}</li>
        </ul>

 new Vue({
        el: '#app',
        data() {
            return {
                students: [
                    {
                        name: '张三',
                        age: 10
                    },
                    {
                        name: '李四',
                        age: 10
                    },
                    {
                        name: '王五',
                        age: 10
                    }
                ],
               
            }
        }
    })

 2.对象

        <ol>
            <li v-for="(value,key) in person">{{value}}-{{key}}</li>
        </ol>

new Vue({
        el: '#app',
        data() {
            return {
                person: {
                    name:'zhangsan',
                    age:10,
                    gender:'male'
                },
            }
        }
    })

 3.字符串

 <p v-for="item in msg">{{item}}</p>

 new Vue({
        el: '#app',
        data() {
            return {
              msg:'hello'
            }
        }
    })

 4.数字

<span v-for="item in 5">{{item}}</span>

 注意：

1.在使用列表渲染时，应给每一个添加的元素一个唯一的key值来标记；

示例1

        <ul>
            <li v-for="(item,index) in students" :key = index>{{index}}-{{item.name}}</li>
        </ul>

2.可使用template实现批量的循环添加；

 <template v-for="(item,index) in 6">
            <h1 :key="index + 'a'">aa</h1>
            <h1 :key="index + 'b'">bb</h1>
            <h1 :key="index + 'c'">cc</h1>
 </template>

3.不推荐 v-if、v-for用在同意元素上