<h2>在v-for使用对象</h2><divid="app3"><ulid="v-for-object"class="demo"><liv-for="value in object">
{{ value }}
</li></ul></div><script>var app3 =newVue({
el:"#app3",
data:{
object:{
title:'How to do lists in Vue',
author:'Jane Doe',
publishedAt:'2016-04-10'}}});</script>
v-for中使用对象也可以获取键名和index两个均为可选参数,且顺序是,值,键,index
<h2>v-for中使用对象也可以获取键名和index两个均为可选参数,且顺序是,值,键,index</h2><divid="app4"><ulclass="demo"><liv-for="(val, key, index) in object">
{{ index }} = > {{ key }} => {{ val }}
</li></ul></div><script>var app4 =newVue({
el:"#app4",
data:{
object:{
title:'How to do lists in Vue',
author:'Jane Doe',
publishedAt:'2016-04-10'}}});</script>
数组操作,增删改查
<h2>数组操作,增删改查</h2><h2>变更方法,会变更调用这些方法的原始数组</h2><p>push pop shift unshift splice sort reverse 这些方法</p><h2>替换数组</h2><p>非变更方法,不会变更原始数组,总会返回一个新数组</p><p>filter()、concat() 和 slice()</p><h2>显示过滤/排序后的结果</h2><p>有时,我们想要显示一个数组经过过滤或排序后的版本,不变更或重置原始数据,可以创建一个计算属性,来返回过滤或排序后的数组</p><divid="app5"><liv-for="n in evenNumbers">{{ n }}</li></div><script>var app5 =newVue({
el:'#app5',
data:{
numbers:[1,2,3,4,5]},
computed:{
evenNumbers:function(){returnthis.numbers.filter(function(number){return number %2===0;});}}});</script><p>在计算属性不适用的情况下(例如v-for循环中),可以使用方法</p><divid="app6"><ulv-for="set in sets"><liv-for="n in even(set)">{{ n }}</li></ul></div><script>var app6 =newVue({
el:"#app6",
data:{
sets:[[1,2,3,4,5],[6,7,8,9,10]]},
methods:{
even:function(numbers){return numbers.filter(function(number){return number %2===0;});}}});</script><hr>
在v-for里使用值范围
<h2>在v-for里使用值范围</h2><divid="app7"><spanv-for="n in 10">{{ n }}</span></div><script>var app7 =newVue({
el:"#app7",
data:{}});</script>
v-for在模板中使用
<h2>v-for在模板中使用</h2><ulid="app8"><templatev-for="item in items"><li>{{ item.msg }}</li><liclass="divider"role="presentation"></li></template></ul><script>var app8 =newVue({
el:'#app8',
data:{
items:[{msg:'tom'},{msg:'jerry'},{msg:'lily'}]}});</script>
在组件上使用v-for
<h2>在组件上使用v-for</h2><p>在自定义组件上,你可以像在任何普通元素上一样使用v-for</p><divid="todo-list-example"><formv-on:submit.prevent="addNewTodo"><labelfor="new-todo">Add a todo</label><inputv-model="newTodoText"id="new-todo"placeholder="E.g. Feed the cat"><button>Add</button></form><ul><liis="todo-item"v-for="(todo, index) in todos"v-bind:key="todo.id"v-bind:title="todo.title"v-on:remove="todos.splice(index, 1)"></li></ul></div><script>
Vue.component('todo-item',{
template:'\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">Remove</button>\
</li>\
',
props:['title']})newVue({
el:'#todo-list-example',
data:{
newTodoText:'',
todos:[{
id:1,
title:'Do the dishes',},{
id:2,
title:'Take out the trash',},{
id:3,
title:'Mow the lawn'}],
nextTodoId:4},
methods:{
addNewTodo:function(){this.todos.push({
id:this.nextTodoId++,
title:this.newTodoText
})this.newTodoText =''}}})</script>