vue基础篇（一）

继续上一篇

vue指令

3. v-for, v-model

• i. v-for
  根据数据生成列表结构

  

   
   
   

   

     

       

          
{{index+1}}
          
{{item.name}}
       
     
   
  

  
  

  

(item,index) in singerList

item 为数组中元素
index 为元素对应的下标(根据位置决定，第二个元素）

css小技巧

1. 实际的布局中为追求更好的视觉效果，一般都会隐藏到无序列表前面的小圆点
2. li 中的元素可能也会比较复杂，不止止显示个文本那么简单
   可以嵌套div，并设置属性display: inline-block;

总结
数组经常和v-for结合使用,语法是( item,index ) in 数据
数组长度的更新会同步到页面上,是响应式的

• ii. v-model
  获取和设置表单元素的值(双向数据绑定)

所谓双向数据绑定是指:
1.解析后，data中的值会同步给表单元素
2.当更改了表单元素，也会同步给data

  

   
   
{{query}}
  

  
  

  

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

源代码参考