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}}
现在要把fruit数组中的水果现实在li中，所以就要循环li, 所以li标签中要用v-for="val in fruit"
注:val不是固定值，可以自己写，li标签之间显示的就是val值
如果我们也想显示数组中元素的下标,只需要将html改成如下即可
- {{index}}=>{{val}}
index就代表元素的下标，当然index也不是固定值，也是可以自己写的
2.1循环对象也是同理的
- {{ind}}=>{{val}}
2.2循环数组对象
- {{val.id}} {{val.name}} {{val.price}}
注：循环数组对象时,val指的是数组中的每个对象访问对象中的属性值要用.（点），对象.属性名
3.v-on:事件绑定
- 按钮
4案例1：完成如下图所示的案例
1.png
点击按钮把input中的内容添加到下面的水果列表中
代码如下
添加水果
- {{val}}
注:
1. 原生js中向数组中添加元素要用push,在vue中同样要用push
2.vue实例中的方法要访问对象实例中的数据要用this
4.1案例2：完成如下图所示的案例
2.png
在每个水果后面添加一个删除按钮，点击删除就可以把当前的删除，点击添加就可以添加水果
添加水果
- {{val}}删除
注：删除的时候要传一个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); } } }
