版权声明：独学而无友，则孤陋寡闻。q群582951247 https://blog.csdn.net/mp624183768/article/details/87899750
h5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="app">
<input placeholder="请输入待办事项"
@keyup.enter="addTodo(newTodo)"
v-model="newTodo"
class="newTodo"
>
<h2>事件列表</h2>
<ul>
<li v-for="todo in todos" v-bind:class={active:todo.completed}>
<input type="checkbox" v-model="todo.completed">
{{todo.content}}
-
<a href="#" @click.prevent="removeTodo(todo)">删除</a>
</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>
</html>css
li.active{
text-decoration:line-through;
}js
var app=new Vue({
el:'.app',
data:{
todos:[],
newTodo:''
},
methods:{
addTodo:function(todo){
this.todos.push({content:todo,completed:false});
},
removeTodo:function(todo){
this.todos.splice(this.todos.indexOf(todo),1);
}
},
});