vue循环

1. v-for循环普通数组

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

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

2. 数组索引值

<p v-for="(item,i) in list">索引值{{i}}，每一项{{item}}</p>

3. 循环对象数组

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

                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）

            <p v-for="(val,key,i) in user">值:{{val}},键:{{key}},索引{{i}}</p>

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

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

<p v-for="count in 10">这是循环第{{count}}次</p>

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

<div id="div1">
            <div>
                <label>ID:
                    <input type="text" v-model="id">
                </label>
                
                <label>NAME:
                    <input type="text" v-model="name">
                </label>
                <input type="button" value="添加" @click="add">
                </div>
            <p v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}}----{{item.name}}</p>
        </div>
        <script>
                    var vm=new Vue({
                        el:'#div1',
                        data:{
                            id:'',
                            name:'',
                            list:[
                                {id:1,name:'ls'},
                                {id:2,name:'yz'},
                                {id:3,name:'zg'},
                                {id:4,name:'hf'},
                                {id:5,name:'xz'},
                                
                                ]
                        },
                        methods:{
                            add(){//添加方法
                                this.list.unshift({id:this.id,name:this.name})
                                                                 //push
                            }
                        }                   
                    })
                </script>

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

---

vue的隐藏和显示

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

<input type="button" @click="flag=!flag" value="toggle">
<h3 v-if="flag">用v-if控制的元素</h3>
<h3 v-show="flag">用v-show控制的元素</h3>

data:{
        flag:true
    },

2. v-if每次都会删除或创建元素,v-show不会进行删除或创建元素，只是切换元素的display：none样式
   页面开始审查元素.png
   点击按钮后审查元素发生的变化.png
3. v-if有较高的切换性能消耗，v-show有较高的初始渲染消耗，如果涉及到频繁切换，最好不要使用v-if

---

vue中的style样式

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

<h1 :style="{color:'red','font-weight'=200}">这是一个h1</h1>

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

<h1 :style=styleObj1>这是一个h1</h1>

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

3. 使用多个样式

<h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>

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

---