刷新后列表依然还在,那么如果想删除某一项呢?
我知道直接在控制台里删除后刷新能行,还有没有其它什么方法
我知道直接在控制台里删除后刷新能行,还有没有其它什么方法
2018-09-07
注意:我是把vue.js通过<scrpt>引入的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>todolist</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="value"/>
<button v-on:click="submit">提交 </button>
</div>
<ul>
<todo
v-for="(item, index) of list":key="index"
:content="item"
:index="index"
v-on:delete="handleDelete"
></todo>
</ul>
</div>
<script>
Vue.component('todo', {
props:['content', 'index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete', this.index)
}
}
})
new Vue({
el:"#root",
data:{
value:"",
list:[]
},
methods:{
submit:function(){
this.list.push(this.value);
this.value="";
},
handleDelete:function(index){
this.list.splice(index, 1)
}
}
})
</script>
</body>
</html>
举报