一、v-bind
v-bind为单向传输
二、v-model
v-model实现双向数据绑定,只能用在表单元素中
三、v-for
(一)v-for循环普通数组
(二)v-for迭代对象数组
(三)v-for迭代对象
(四)v-for迭代数字
(五)key属性的使用
知识点
1、v-for循环的时候,key属性只能使用number或者string;
2、key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值;
3、在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串或数字类型:key值。
举例
方法一:
<div id="app">
ID:<input type="text" v-model="id">Name:<input type="text" v-model="name">
<input type="button"@click="add"value="添加">
<p v-for="item in list"><input type="checkbox">{{item.id}}--{{item.name}}</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
id:"",
name:"",
list:[
{id:1,name:'李斯'},
{id:2,name:'嬴政'},
{id:3,name:'赵高'},
{id:4,name:'韩非子'}
]
},
methods:{
add(){
this.list.push({id:this.id,name:this.name})
}
}
})
</script>
方法二:
把上例子methods中的push()改为unshift(),发现出现如下错误:被勾选的索引从4变为3.
为了解决该问题,需要为循环的每一项设有一个唯一的标识符,即:key="item.id"(建议在任何情况下都加上)
<p v-for="item in list":key="item.id"><!--因为key的形式必须为数字或者字符串,所以不是item而是item.id-->
四、v-if和v-show
v-if的特点:每次都会重新删除或创建元素,有较高的切换性能消耗
v-show的特点:每次不会重新进行DOM的删除或创建操作,只是切换了元素的display:none样式。
有较高的初始渲染消耗。
总之,如果元素涉及到频繁的切换,最好不要使用v-if,而是使用v-show;
如果元素可能永远也不会显示出来被用户看到,则推荐v-if。
示例1(注意例子中toggle的用法!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!)
示例2
五、