vueJs的学习笔记（四）

列表渲染

使用v-for的指令，可以实现view层的数组显示。
它的语法是：item in items。
item表示要迭代的数据，items表示数据源。

实例：
HTML：

<ul id="ulOne">  <li v-for="item in items">    {{item.msg}}  </li></ul>

JS：

var app = new Vue({  el:"#ulOne",  data:{    items:[      {msg:"1"},      {msg:"2"},      {msg:"3"}    ]  }})

数组还提供了第二个参数index作为索引。它的语法是：(item,index) in items;

实例：
HTML：

<ul id="ulOne">    <li v-for="(item,index) in items">        {{info}}-{{index}}-{{item.msg}}    </li></ul>

JS：

var app = new Vue({                     el:"#ulOne",                     data:{                             info:"number",                             items:[                               {msg:"1"},                               {msg:"2"},                               {msg:"3"}                              ]                         }                })

对对象使用v-for

实例：
HTML：

<ul id="ulOne">          <li v-for="value in objects">            {{value}}          </li>        </ul>

JS：

var app = new Vue({                              el:"#ulOne",                              data:{                                objects:{                                    firstname:"peter",                                    lastname:"sensa"                                    }                                }                })

同之前一样，我们可以在参数中添加index和新的参数key（键名）。

HTML：

<ul id="ulOne">          <li v-for="(key,value,index) in objec">            {{index}}--{{key}}:{{value}}          </li>        </ul>

JS：

var app = new Vue({                              el:"#ulOne",                              data:{                                objec:{                                    firstname:"peter",                                    lastname:"sensa"                                    }                                }                })

数组更新检测

vuejs中将js里面可以对数据进行添加，删除等操作的方法来监控数组的变异。
例如运用push（）：
语法是：实例对象.数组名.方法({数组})

app.items.push({msg:"4"})

除了改变数组，还有不改变原数组，返回一个新数组的方法。
例如：

app.items = app.items.filter(function(item){return item.msg.match(/1/)})

对象更改检测注意事项

由于js的限制，vue中不能直接添加删除对象属性，但是可以响应式的添加删除嵌套的对象属性。

我们以一个实例来举例：语法是：Vue.set(实例名字.嵌套属性名,属性,值).我们的数据借用上面存在的v-for的属性实例：

Vue.set(app.objec,"age",12)

如果你想赋予多个属性值，可以采用下面的方式：

app.objec = Object.assign({}, app.objec, {  age: 27,  favoriteColor: 'Vue Green'})

显示过滤排序结果

我们想要显示过滤排序结果的副本，而不是改变原数组。我们可以使用计算属性来显示。

实例：
HTML：

<ul id="ulOne">          <li v-for="fi in evenNumbers">            {{fi}}          </li>        </ul>

JS：

var app = new Vue({                              el:"#ulOne",                              data:{                                    numbers:[1,2,3,4,5]                               },                              computed:{                                evenNumbers:function(){                                    return this.numbers.filter(function(number){                                        return number % 2 == 0;                                    })                                }                              }                })

PS:或者你也可以使用methods的方式来进行。关于methods的区别我们之前已经介绍过了。

v-for的其他用法

例如：

 <li v-for="fi in 10">            {{fi}}          </li>

实现在10以内的整数遍历。

PS：v-for和v-if在同一层的时候将会是v-for的优先级更高。