vue循环与显示

vue循环

1. v-for循环普通数组

{{item}}

data:{
    list:[1,2,3,4,5,6,7]
    },

2. 数组索引值

索引值{{i}}，每一项{{item}}

3. 循环对象数组

p v-for="(user,i) in list">索引：{{i}}，id：{{user.id}}，名字{{user.name}}

                data:{
                    list:[
                        {id:1,name:'zs1'},
                        {id:2,name:'zs2'},
                        {id:3,name:'zs3'},
                        {id:4,name:'zs4'},  
                ]   
                },

4. 循环对象，值（1，ts，man）键（id，name，gander）

            
值:{{val}},键:{{key}},索引{{i}}

              data:{ 
                    user:{
                        id:1,
                        name:'ts',
                        gender:'man'
                    }
                },

5. 迭代数字,in后面可以放普通数组，对象数组，对象，还可以放数字，使用v-for迭代数字，count的值从1开始

这是循环第{{count}}次

6. v-for循环的时候，key只能使用number获取string,key在使用的时候必须使用v-bind属性绑定的形式指定key的值,保证数据的唯一性，使data中的数据和页面数据关联起来（在2.2.0的版本中，当在组件中使用v-for时，key是必须的）

            

                ID:
                    
                
                
                NAME:
                    
                
                
                
            
{{item.id}}----{{item.name}}
        
        

7. 如果不使用key，在添加6时在一开始勾选5的复选框会移动到4，使用key关联后数据不会发生偏差
   
   

   勾选第五项
   
   
   

   添加一组数据后的显示结果.png

---

vue的隐藏和显示

1. v-if和v-show的使用，点击按钮会显示和隐藏元素

用v-if控制的元素
用v-show控制的元素

data:{
        flag:true
    },

2. v-if每次都会删除或创建元素,v-show不会进行删除或创建元素，只是切换元素的display：none样式
   
   

   页面开始审查元素.png
   
   
   

   点击按钮后审查元素发生的变化.png
3. v-if有较高的切换性能消耗，v-show有较高的初始渲染消耗，如果涉及到频繁切换，最好不要使用v-if

---

vue中的style样式

1. 如果属性中带有-必须使用‘’

这是一个h1

2. 将样式对象定义到data中

这是一个h1

data:{
    styleObj1:{color:'red','font-weight':200}
    }

3. 使用多个样式

这是一个h1

data:{
    styleObj1:{color:'red','font-weight':200},
    styleObj2:{'font-style':'italic'}
            },

---