vue循环
- v-for循环普通数组
<p v-for="item in list">{{item}}</p>
data:{
list:[1,2,3,4,5,6,7]
},
- 数组索引值
<p v-for="(item,i) in list">索引值{{i}}，每一项{{item}}</p>
- 循环对象数组
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'},
]
},
- 循环对象，值（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'
}
},
- 迭代数字,in后面可以放普通数组，对象数组，对象，还可以放数字，使用v-for迭代数字，count的值从1开始
<p v-for="count in 10">这是循环第{{count}}次</p>
- 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>
- 如果不使用key，在添加6时在一开始勾选5的复选框会移动到4，使用key关联后数据不会发生偏差
vue的隐藏和显示
- 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
},
- v-if每次都会删除或创建元素,v-show不会进行删除或创建元素，只是切换元素的display：none样式
- v-if有较高的切换性能消耗，v-show有较高的初始渲染消耗，如果涉及到频繁切换，最好不要使用v-if
vue中的style样式
- 如果属性中带有-必须使用‘’
<h1 :style="{color:'red','font-weight'=200}">这是一个h1</h1>
- 将样式对象定义到data中
<h1 :style=styleObj1>这是一个h1</h1>
data:{
styleObj1:{color:'red','font-weight':200}
}
- 使用多个样式
<h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>
data:{
styleObj1:{color:'red','font-weight':200},
styleObj2:{'font-style':'italic'}
},
