5. Vue - 小清单实例
Posted hq82
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了5. Vue - 小清单实例相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于5. Vue - 小清单实例的主要内容，如果未能解决你的问题，请参考以下文章