vue2.3-列表循环、表单元素绑定

一、列表循环、表单元素绑定

1、v.for-根据数据生成列表结构

例1:循环访问数据

    
    


   


       

           

               {{ index+1 }} 测试测试：{{it}}
           
       
   

运行结果：

例2-响应式添加移除数据

    
    


   


       
       

       

           {{item.name}}
       
   

总结：

v-for指令的作用是：根据数据生成列表结构

数组经常和v-for结合使用

语法是（item，index） in 数据

item和index可以结合其他指令一起使用

数组长度的更新会同步到页面上，是响应式的

2、v.on补充-传递自定义参数，事件修饰符

例-点击响应

运行结果：

例2- 输入后回车键时响应

运行结果：

 总结：

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上.修饰符 可以对事件进行限制

.enter可以限制触发的按键为回车

事件修饰符有多种 

3、v.model-获取和设置表单元素的值（双向数据绑定）

    
    


   


       

       
       
{{message}}
   

运行结果：

总结：

v-model指令的作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据、表单元素的值是双向绑定，无论改变谁另一个都会被改变