第二篇Vue样式绑定,条件和列表渲染

1. class与style的绑定

1.理解

在应用界面中国,某个(些)元素的样式时变化的class/style绑定就是专门用来实现动态样式效果的技术

2. class绑定: :class='xxx'

xxx是字符串
xxx是对象{aClass:isA,bClass:isB}|{属性名是calss名:值是bool值}
xxx是数组

3.style绑定

:style="{ color:activeColor,fontSize:fontsize + 'px'}"
其中activeColor/fontSize是data属性
代码:

            
1. class绑定: :class='xxx'
            
xxx字符
            
xxx对象
            
xxx数组
            
2. style绑定
            
style绑定q
            
             更新
        
        
        

2.条件渲染

1.条件渲染指令

v-if : 进行标签移出,所以在频繁切换时,会不断的创建标签,删除标签,时间很慢
v-else
v-show: 通过样式(display:none)隐藏
2.比较v-if与v-show
如果需要频繁切换v-show较好-->
代码:

            
yes
            
no
            
            
成功
            
失败
            改变
        
        
        

3. 列表渲染

1.遍历数组(常用)
v-for ="(p,index) in persons":此时获得了对象p,通过p.name等列出每一项属性名

测试:v-for 遍历数组
            

                

                    {{index}}---{{p.name}}---{{p.age}}---删除---
                    更新---
                    增加
                
            

vue在更新页面中,必须要调用编译方法,当执行了方法后才会对页面的自动检测更新
splice():splice(删除哪一个索引,删除数目[,插入的对象数据]):这种方法可以进行三种(增删改的操作)
增加:

addP(index, newP) {
                        //增加一栏
                        this.persons.splice(index, 0, newP)
                    }

删除:

deleteP(index) {
                        //删除persons中指定index的p
                        this.persons.splice(index, 1)
                    }

修改:

updateP(index, newP) {
                        //并没有改变persons本身,数组内部发生了变化,但并没有调用变异方法,所以vue不会更新界面
                        this.persons.splice(index, 1, newP)

                    }

2.遍历对象(不常用)
v-for="(value,key,index) in persons[1]" 在下面依次循环出需要的值

测试:v-for 遍历对象
            

                

                    {{value}}----{{key}}----{{index}}
                
            

整体代码:

            
测试:v-for 遍历数组
            

                

                    {{index}}---{{p.name}}---{{p.age}}---删除---
                    更新---
                    增加
                
            
            
测试:v-for 遍历对象
            

                

                    {{value}}----{{key}}----{{index}}