<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小清单</title>
<link rel="stylesheet" href="../bootstrap/bootstrap/css/bootstrap.min.css">
<style>
/*修饰完成事件样式*/
.doneIcon {
color: green;
}
.doneText {
text-decoration: line-through;
}
</style>
</head>
<body>
<script src="../vue/vue.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="panel panel-default" style="margin-top: 80px">
<div class="panel-heading" style="background-color: rgba(37,176,211,0.26)">
<h3 class="panel-title">小清单</h3>
</div>
<div class="panel-body" id="app">
<!--通过form中默认回车提交,但还需要清除掉form的默认的提交事件;调用自定义的addThing事件-->
<form action="" v-on:submit.prevent="addThing">
<div class="input-group col-sm-6 col-sm-offset-3">
<input type="text" class="form-control" placeholder="请输入待办事件" v-model="inputThing.title">
<span class="input-group-btn">
<button class="btn btn-default" type="button" v-on:click="addThing"><span
class="glyphicon glyphicon-plus"></span></button>
</span>
</div><!-- /input-group -->
</form>
<hr>
<ul class="list-group">
<li class="list-group-item" v-for="(item, index) in things" v-bind:key="index"
v-on:click="done(index)">
<span class="glyphicon glyphicon-ok-sign" v-bind:class="{doneIcon:item.status}"></span>
<span v-bind:class="{doneText:item.status}">{{ item.title }}</span>
<span class="glyphicon glyphicon-remove-sign pull-right"
v-on:click="delThing(index)"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
// 根据设置的status来为完成事件添加样式
things: [
{'title': '吃饭', 'status': false},
{'title': '睡觉', 'status': false},
{'title': '打豆豆', 'status': false},
],
inputThing: {'title': '', 'status': false},
},
methods: {
addThing() {
// 如果输入为空或空格(trim)return
if (this.inputThing.title.trim() === '') {
return
}
this.things.push(this.inputThing);
this.inputThing={'title': '', 'status': false}
},
// 根据索引删除数组中的数据splice(元素索引,删除几个)=>1,则删除当前元素;不写则删除当前元素及后面的所有
delThing(index) {
this.things.splice(index, 1)
},
done(index) {
this.things[index].status = true;
}
}
})
</script>
</body>
</html>