Vue核心基础4：绑定样式、条件渲染、列表渲染

1 绑定样式

【代码】

    
    
    
    
    



    

        
        
test
 


        
        
test11
 

        
        
        
test


        
        
        
{{name}}

        
        
{{name}}

        

2 条件渲染

【代码】

    
    
    
    



    

        
        
hello {{name}}

        
        
hello {{name}}

        
        
hello {{name}}
        
hello222 {{name}}
        
bye {{name}}

        
        
        

    
    

---

3 列表渲染

【代码】

    
    
    
    



    

        

            

            
            
姓名：{{p.name}} ---- 年龄：{{p.age}}


            

            
            
汽车信息
            

                {{key}}: {{value}}
            

            
            
遍历字符串
            
{{index}}-{{char}}


            
            
遍历指定次数
            
{{index}}-{{number}}

        
    
    

---

 

3.1 v-for 中 key 的作用

分析：因为以索引号作为key, 所以首先是找到相同的key进行比对，如果标签内容不相同，则用新的替换旧的。因为比对的是虚拟DOM, 所以不管input中有没有内容，都是一样的。所以在比对的时候，会复用原来的input。这里就会出现问题了

---

这里用id 作为key 就不会由上述index作为key 的问题

3.2 列表过滤

方法1：可以用watch属性实现

    

        

            
人员列表 (列表过滤)
            


            
            
姓名：{{p.name}} ---- 年龄：{{p.age}} ---- 性别：{{p.sex}}

        
    

                const x = new Vue({
                    el: '#root',
                    data: {
                        name: 'Vue',
                        keyWord: '',
                        persons: [
                            { id: '001', name: '张三', age: 18, sex: '男' },
                            { id: '002', name: '张杰', age: 19, sex: '男' },
                            { id: '003', name: '张韶涵', age: 20, sex: '女' },
                            { id: '004', name: '章若楠', age: 21, sex: '女' },
                            { id: '005', name: '周杰伦', age: 22, sex: '男' }
                        ],
                        filterPersons: []
                    },
                    watch: {
                        keyWord: {
                            immediate: true,
                            // indexOf  字符串中是否包含某个字符
                            handler(val) {
                                this.filterPersons = this.persons.filter(p => p.name.indexOf(val) !== -1)
                            }
                        }
                    }

---

方法2：使用computed属性实现

        const x = new Vue({
            el: '#root',
            data: {
                name: 'Vue',
                keyWord: '',
                persons: [
                    { id: '001', name: '张三', age: 18, sex: '男' },
                    { id: '002', name: '张杰', age: 19, sex: '男' },
                    { id: '003', name: '张韶涵', age: 20, sex: '女' },
                    { id: '004', name: '章若楠', age: 21, sex: '女' },
                    { id: '005', name: '周杰伦', age: 22, sex: '男' }
                ]
            },
            computed: {
                filterPersons() {
                    return this.persons.filter(p => p.name.indexOf(this.keyWord) !== -1)
                }
            }
        })

3.3 列表排序

【代码】

    

        

            
            
人员列表 (列表排序)
            
            升序
            降序
            原顺序
            


            
            
姓名：{{p.name}} ---- 年龄：{{p.age}} ---- 性别：{{p.sex}}