<div id="app">
<ul>
<li v-for="(todo,index) in todos">@{{todo.title}} {{--将todos内容循环输出，以todo和index--}}
<button @click="deleteTodo(index)">delete</button>
</li>
</ul>
<form @submit.prevent="addTodo(newTodo)"> {{--@=v-on: prevent表示阻止提交--}}
<input type="text" v-model="newTodo.title"> {{--双向绑定data.newTodo.title--}}
<button value="submit">add</button>
</form>
</div>
<script>
new Vue({
el:"#app",
data:{
todos:[{id:1,title:1},{id:2,title:2}],
newTodo:{id:null,title:''}
},
methods:{
addTodo(newTodo){
this.todos.push(newTodo)
this.newTodo={id:null,title:''}//重置输入框内容为空
},
deleteTodo(index){
this.todos.splice(index,1)},
},
})
</script>
vue2.0 双向绑定和事件
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前言 Vue 2.x相比较Vue 1.x,移除组件的props的双向绑定功能。 单向数据流（官方解释） prop ...
- Vue1.0保留着两个事件 $dispatch() // 派发事件，沿着父链冒泡$broad...
- 是什么时候第一次听这首歌，我已经没有印象了，只是记得当时屏幕里一面缓缓拉出洛杉矶的夜景，一边轻轻飘起Eric Cl...
