vue指令

一、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

 

五、