vue指令

3. v-for, v-model

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

<body>
  <div id="app">
   <input type="button" value="增加" @click="add()">
   <!-- @click 无参函数加不加括号都可以 -->
   <input type="button" value="减少" @click='remove'>

   <ul>
     <li v-for="(item,index) in singerList">
       <div>
          <div class="singer">{{index+1}}</div>
          <div class="singer">{{item.name}}</div>
       </div>
     </li>
   </ul>
  </div>

  <!-- 导入开发版本的Vue.js  -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 创建Vue实例对象, 设置el属性和data属性
    var app = new Vue({
      el: '#app',
      data: {
        singerList:[],
      },
      methods: {
        add:function(){
          this.singerList.push({name:'周杰伦'});
          this.singerList.push({name:'王力宏'})
        },

        remove:function(){
          this.singerList.shift();
        }  
      }
    });  
  </script>
</body>

(item,index) in singerList

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

css小技巧

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

 <style type="text/css">
    /* 隐藏li前面的小圆点 */
    li{
      list-style: none
    } 
    /* 块级元素不换行 */
    .singer{
      display: inline-block;
    }
  </style>

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

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

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

<body>
  <div id="app">
   <input  type="text" value="搜索" v-model="query" @keyup.enter="search">
   <h2>{{query}}</h2>
  </div>

  <!-- 导入开发版本的Vue.js  -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 创建Vue实例对象, 设置el属性和data属性
    var app = new Vue({
      el: '#app',
      data: {
        // 查询关键字
        query: "王力宏",
      },
      methods: {
        search:function(){
          console.log(this.query);
        },
      }
    });  
  </script>
</body>

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

源代码参考

vue基础篇（一）

vue基础篇（一）

vue指令

3. v-for, v-model

推荐阅读更多精彩内容