Vue学习03
【条件渲染】
--html
<h1 v-if="Math.random()>0.5">Now you see me</h1> <h1 v-else>Now you don't</h1>
# v-else-if
--html
<div v-if="type==='A'"> A </div> <div v-else-if="type==='B'"> B </div> <div v-else-if="type==='C'"> C </div> <div v-else> Not A/B/C </div>
【列表渲染】
v-for 使用数组渲染列表
--html
<ul id=example-1"> <li v-for="item in items" :key="item.message"> {{item.message}} </li> </ul>
-- js
var example1=new Vue({
el:'#example-1',
data:{
item:[
{message:'Foo'},
{message:'Bar'}
]
}
})
--view
- Foo
- Bar
# 在 v-for 里使用对象
-- html
<ul id='v-for-object' class='demo'> <li v-for="value in object"> {{value}} </li> </ul>
-- js
new Vue({
el:'#v-for-object',
data:{
object:{
title:'How to do lists in Vue',
author:'Jane Doe',
publishedAt:'2016-04-10'
}
}
})
--view
- How to do lists in Vue
- Jane Done
- 2016-04-10
使用第二个参数为property名称:
--html
<div v-for="(value,name) in object"> {{name}}:{{value}} </div>
-- view
title:How to do lists in Vue
author:Jane Doe
publishedAt:2016-04-10
加上索引的三个参数:
--html
<div v-for="(value,name,index) in object"> {{index}}.{{name}}:{{value}} </div>
--view
0.title:How to do lists in Vue
1.author:Jane Doe
2.publishedAt:2016-04-10
#在组件上使用 v-for
--html
<div id="todo-list-example"> <form v-on:submit.privent="addNewTodo"> <label for="new-todo">Add a todo</label> <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat"> <button>Add</button> </form> <ul> <li is="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>
--js
Vue.comonent('todo-item',{ template:'\ <li>\ {{title}}\ <button v-on:click="#emit(\'remove\'">Remove</button>\ ', props:['title'] }) new Vue({ el:'#todo-list_example', data:{ newTodoText:'', todos:[ { id:1, title:'Do this dishes' }, { id:2, title:'Take out the trash' } ], nextTotoId:3 }, methods:{ addNewTodo:function(){ this.todos.push({ id:thisnextTotoId++, title:this.newTodoText, }) this.newTodoText='' } } })
【监听事件】
v-on 指令用于监听DOM事件
--html
<div id="example-1"> <button v-on:click='greet'>Greet</button> </div>
-- js
var example1=new Vue({
el:'#example-2',
data:{
name:'Vue.js'
},
methods:{
greet:function(event){
alert('Hello '+this.name+'!')
if(event){
alert(event.target.tagName)
}
}
}
})
# 内联调用
--html
<div id='example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('waht')">Say what</button> </div>
--js
new Vue({
el:"#example-3",
methods:{
say:function(message){
alert(message)
}
}
})