vue.js简单实现的页面添加数据，删除数据的效果，效果如下图
demo.gif
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div class="wrap">
<div class="page-top">
<h2>任务列表</h2>
</div>
<div class="main">
<p>添加任务：</p>
<input type="text" name="" placeholder="例如：Hello World!" class="task-input"
v-model="todo"
v-on:keyup.enter="addTode">
<ul class="task-count" v-show="list.length">
<li>1个任务未完成</li>
<li class="action">
<a href="">所有任务</a>
<a href="">未完成任务</a>
<a href="">完成的任务</a>
</li>
</ul>
<div class="tasks">
<div class="no-task-tip" v-show="!list.length">还没有添加任何任务</div>
<ul class="todo-list">
<li class="todo" :class="{line_through:item.isChecked}" v-for="item in list">
<div class="view">
<input class="checkStyle" type="checkbox" v-model="item.isChecked">
<label class="label">{{item.title}}</label>
<a class="destroy" href="javascript:;" @click="deleteTodo(item)">x</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<script>
var list=[
// {
// title:'Hello World',
// isChecked:false
// },
// {
// title:'Hello World',
// isChecked:true
// }
];
new Vue({
el:'.main',
data:{
list:list,
todo:''
},
methods:{
addTode(ev){
console.log('点到我了');
this.list.push({
title:this.todo,
isChecked:false
});
this.todo=""
},
deleteTodo(todo){
var index=this.list.indexOf(todo);
this.list.splice(index,1)
}
}
});
</script>
</body>
</html>
css样式：
.wrap{
width: 100%;height: auto
}
.page-top{
width: 700px;height: 40px;line-height: 40px;background-color: #ccc;margin:0px auto
}
.main{
width: 700px;height: auto;margin: 0px auto;line-height: 40px
}
.task-count {
width: 100%;height: auto;float: left;
}
.task-count li:nth-child(1){
float: left;width: 30%
}
.task-count li:nth-child(2){
float:right;width: 70%
}
.action a{
color: black;border:1px solid black;
float: right;padding: 0px 10px
}
.task-input{
width: 100%;height: 40px;outline: none;
}
.big-tittle{
display: inline-block;
}
.tasks{
width: 100%;height: auto;float: left;
}
.no-task-tip{
width:700px;height:40px;border:1px solid #ccc;line-height: 40px
}
.todo-list li{
width: 100%;height: 40px;border: 1px solid #ccc
}
input[type=checkbox] {
margin:15px 20px;
width: 15px;height: 15px;
border-radius:100%;
background-color: #fff;
border: 1px solid #ccc;
}
.label{
font-size: 16px;vertical-align:left;
}
.line_through{
text-decoration:line-through;
color: #ccc
}
.destroy{
float: right;line-height: 40px;
font-size: 14px;margin-right: 15px;
}
运用点：
v-show ：
当列表页还没出现的时候 <div class="no-task-tip" v-show="!list.length">还没有添加任何任务</div> 通过判断<script></script>标签里面的的 list里面有没有对象，没有的话显示，有的话隐藏
动态绑定class
<li class="todo" :class="{line_through:item.isChecked}" v-for="item in list"> 中的:class="{line_through:item.isChecked}" 是动态绑定 class，语法 :class="{className:表达式}" 表达式的值为true时添加className,反之不添加。在这个案例中的运用是 如果checkbox被勾选，则给文本改变颜色和在中间添加划线 .line_through{text-decoration:line-through;color: #ccc}·
结合下面checkbox <input class="checkStyle" type="checkbox" v-model="item.isChecked"> 双向绑定数据用v-model="item.isChecked"，也是结合上面的去判断
对于新添加的数据
methods:{ addTode(ev){ console.log('点到我了'); this.list.push({ title:this.todo, isChecked:false }); this.todo="" },
这一段中是methods方法，可以注意到isChecked:false,没错，这里对于新添加的数据要定义好，根据这里的运用是把checkbox默认为没有勾选
v-for=" "的运用
v-for="item in list" 这里是循环
还有很多运用到的，这里就不一 一写出，主要是了解数据的运用，根据MVVM模式去绑定数据渲染页面，同时，要先把静态页面写出来，然后再运用vue.js去处理页面
参考视频教程
网友评论