Vue列表循环

v-for指令的使用

 <div class="test">
        <div :class="[activeClass,error]">dsdsd</div>
        <li v-for="item in items">{{item.text}}</li>
    </div>

js代码

    var myVue = new Vue({
        el: ".test",
        data: {
            items:[{text:"sasas"},{text:"dsaa"}]
        },
    });

但是会出现警告。
值得注意的是
1、在v-for中拥有对父作用域的完全访问属性。
2、在v-for中由第二个可选的参数 index来得到当前的下标，但是在v-for循环中必须有 index这项

  <div class="test">
        <li v-for="item,index in items">
            {{parentMessage}}-{{ index }}-{{item.text}}
        </li>
    </div>

js代码

  var myVue = new Vue({
        el: ".test",
        data: {
            parentMessage:"父作用域",
            items:[{text:"sasas"},{text:"dsaa"}]
        },
    });

v-for运用在template

   <div class="test">
      <template v-for="item,index in items">
          <li class="xian"></li>
          <li >
              {{parentMessage}}-{{ index }}-{{item.text}}
          </li>
      </template>
    </div>

js代码

    var myVue = new Vue({
        el: ".test",
        data: {
            parentMessage:"父作用域",
            items:[{text:"sasas"},{text:"dsaa"}]
        },
    });

使用v-for来迭代对象

<div class="test">
      <template v-for="objitem in object">
          <li class="xian"></li>
          <li >
              {{objitem}}
          </li>
      </template>
    </div>

js代码

 var myVue = new Vue({
        el: ".test",
        data: {
            object:{
                naem:"赵文娟",
                age:"19",
                jisuan:"山西",
            }
        },
    });

为其提供第二个参数key来获得键值

  <div class="test">
      <template v-for="value,key in object">
          <li class="xian"></li>
          <li >
              {{key}}:{{value}}
          </li>
      </template>
    </div>

js代码

    var myVue = new Vue({
        el: ".test",
        data: {
            object:{
                naem:"赵文娟",
                age:"19",
                jisuan:"山西",
            }
        },
    });

v-for迭代整数

    <div class="test">
      <template v-for="n in 10">
          <li class="xian"></li>
          <li >
              {{n}}
          </li>
      </template>
    </div>

js代码

 var myVue = new Vue({
        el: ".test",
    });

必须为页面创建一个vue实例，否则所有的vue代码都没有用

组件中使用v-for指令

    <div class="test">
     <input v-model="newTodo" @keyup.enter="addNew" placeholder="add new  todo">
        <li is="tode-item" v-for="todo,index in todos" :title="todo" :index="index" v-on:remove="todos.splice(index,1)"></li>
    </div>

js代码

  Vue.component("tode-item",
            {   props:["title","index"],
                template: "<li>
      {{ title }}
      <button v-on:click="$emit("remove")">X</button>
    </li>
  ",})
    var myVue = new Vue({
        el: ".test",
        data:{
            newTodo:"",
            todos:["Do the dishes","Take out the trash","Mow the lawn"]
        },
        methods:{
            addNew:function () {
               var text=this.newTodo.trim();
                if(text){
                    this.todos.push(text);
                }
            },
            remove:function () {
               console.log(1111);
                this.newTodo="";
            }
        }
    });

注意：
1、使用模板的时候。一定要分清楚父作用域和子作用域，子作用域不能使用父亲的函数，
2、使用模板的时候，模板中一定是只有一个根节点构成模板