2018-09-11 vue的指令

vue常用指令

v-model:双向数据绑定，常用于表单元素

v-for: 对数组或对象进行循环操作

v-on:时间绑定,用法：v-on:事件

v-show/v-if：控制元素的显示隐藏

1.v-model

{{msg}}

newVue({        el:"#itany",        data:{            msg:''}            })

我们把msg绑定到input元素上，同时p标签里也要现实msg.打开页面我们发现当向input中输入内容时，p标签中的值会随着input中的内容变化，这就是一个最简单的双向数据绑定

2.v-for:对数组或对象进行循环操作

{{val}}

newVue({        el:"#itany",        data:{            fruit:['香蕉','苹果','鸭梨']        }            })

现在要把fruit数组中的水果现实在li中，所以就要循环li, 所以li标签中要用v-for="val in fruit"

注:val不是固定值，可以自己写，li标签之间显示的就是val值

如果我们也想显示数组中元素的下标,只需要将html改成如下即可

{{index}}=>{{val}}

index就代表元素的下标，当然index也不是固定值，也是可以自己写的

2.1循环对象也是同理的

{{ind}}=>{{val}}

newVue({        el:"#itany",        data:{            user:{id:'001',name:'jack',age:'18'}        }            })

2.2循环数组对象

{{val.id}}              {{val.name}}              {{val.price}}

newVue({        el:"#itany",        data:{            fruit:[              {id:'001',name:'香蕉',price:'1'},              {id:'002',name:'苹果',price:'2'},              {id:'003',name:'鸭梨',price:'3'}            ]        }            })

注：循环数组对象时,val指的是数组中的每个对象访问对象中的属性值要用.（点），对象.属性名

3.v-on:事件绑定

按钮

newVue({        el:"#itany",        data:{            fruit:[              {id:'001',name:'香蕉',price:'1'},              {id:'002',name:'苹果',price:'2'},              {id:'003',name:'鸭梨',price:'3'}            ]        },        methods:{            alt:function(){                alert('v-on事件绑定')            }        }    })

4案例1：完成如下图所示的案例

1.png

点击按钮把input中的内容添加到下面的水果列表中

代码如下

添加水果

{{val}}

newVue({        el:"#itany",        data:{            fruitList:['香蕉','苹果','鸭梨'],            fruit:''},        methods:{            add:function(){this.fruitList.push(this.fruit);//向列表中插入值//注：访问vue实例中的数据要用thisthis.fruit='';//清空input}        }    })

注:

1. 原生js中向数组中添加元素要用push,在vue中同样要用push

2.vue实例中的方法要访问对象实例中的数据要用this

4.1案例2：完成如下图所示的案例

2.png

在每个水果后面添加一个删除按钮，点击删除就可以把当前的删除，点击添加就可以添加水果

添加水果

{{val}}删除

newVue({        el:"#itany",        data:{            fruitList:['香蕉','苹果','鸭梨'],            fruit:''},        methods:{            add:function(){this.fruitList.push(this.fruit);//向列表中插入值//注：访问vue实例中的数据要用thisthis.fruit='';//清空input},            delt:function(index){this.fruitList.splice(index,1);            }        }    })

注：删除的时候要传一个index,这样就可以实现点击哪个删除哪个，如果不想穿index,那就要把splice()中的index换成this就可以了

5.v-show/v-if

使用v-show/v-if完成如下效果图

3.png

代码如下：

p{width:100px;height:100px;background-color:#f00;        }点击按钮隐藏点击按钮显示点击按钮隐藏显示来回切换欢迎光临newVue({        el:"#itany",        data:{            flag:true,        },        methods:{            hide:function(){this.flag=false;//点击隐藏},            shows:function(){this.flag=true;//点击显示},            toggle:function(){//点击隐藏或显示if(this.flag){this.flag=false;                }else{this.flag=true;                }            }        }    })

v-show/v-if都可以控制元素的显示和隐藏，但是方式不一样，v-show使用的是display:none来控制的，v-if使用的是visibility:hidden来控制的

练习：

结合bootstrap完成如下效果

xx.png

点击添加按钮可以把输入矿中的内容添加到table中，点击每行的删除也可以当前行删除掉

代码

用户管理用户名年龄邮箱编号姓名年龄邮箱操作{{index+1}}{{value.uname}}{{value.age}}{{value.email}}删除newVue({        el:'#itany',        data:{            user:[                  {uname:'jack',age:18,email:'123@126.com'},                  {uname:'rose',age:19,email:'456@126.com'},                  {uname:'jhon',age:20,email:'789@126.com'}                ],            info:{}        },        methods:{            add:function(){this.user.push(this.info);            },            delet:function(){this.user.splice(this,1);            }        }    }