一 创建测试项目
vue init webpack-simple vuedemo
二 进入demo目录
cd vuedemo
三 安装依赖
cnpm install
四 修改代码App.vue
<template>
<div id="app">
<input type="text" v-model="todo"/>
<button @click="doAdd()">+ add</button>
<ul>
<li v-for="(item,key) in list" :key="item.id">
{{key}} {{item}}--- <button @click="removeData(key)">Delete</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
todo:'',
list: []
};
},
methods:{
doAdd(){
this.list.push(this.todo);
this.todo = ""
},
removeData(key){
this.list.splice(key, 1)
}
}
};
</script>
<style>
</style>
五 运行
npm run dev
image.png
六 总结
1 复习控件事件@click
2 列表的用法
push 添加元素到列表
splice 删除从 index 处开始的零个或多个元素
七 参考
https://cn.vuejs.org/v2/guide/events.html
http://www.runoob.com/jsref/jsref-splice.html
