您的位置：首页 > 产品设计 > UI/UE
使用Vue框架实现待办事项功能

2017-05-24 00:00 344 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<script type="text/javascript" src="libs/vue.js"></script>
<style>
#box{width: 600px;height: 700px;padding: 20px;margin: 50px auto 0;background-color: #ccc;}
h2{border-bottom: 2px solid #333;line-height: 30px;padding: 10px;}
table{border:2px solid #333;text-align: center;border-collapse: collapse;margin: 0 auto;}
p{line-height: 30px;font-size: 16px;}
th,td{border: 1px solid #333;font-size: 14px;padding: 10px 20px;}
.all_del{background-color: #ed0000;padding: 5px 10px;border: none;border: 1px #666 solid;color: #fff;font-size: 16px;}
.btn{font-size: 50px;cursor: pointer;display: inline;}
label{line-height: 30px;font-size: 14px;margin-left: 5px;}
.input_text{width: 100%;height: 35px;border-radius: 5px;border:1px solid #666;}
.input_btn{padding: 5px 10px;border-radius: 5px;margin: 10px 10px;}
</style>
<body>
<div id="box">
<h2>待办事项</h2>
<div class="btn" v-on:click='fn' v-text='txt'>-</div>  <!-- v-on指令(fn函数)：点击的时候，改变页面中加减号 -->
<div class="wrap" v-show='bol'>  <!-- 外层包裹容器，v-show设定变量bol，通过改变bol的布尔值实现它的显示和隐藏 -->
<form>
<label>待办日期</label><br>
<input type="text" placeholder=" 请输入待办事项日期" class="input_text" v-model='date'><br>  <!-- v-model指令用于收集用户输入的待办事项日期(date) -->
<label>待办事项</label><br>
<input type="text" placeholder=" 请输入待办事项" class="input_text" v-model='someing'><br>  <!-- v-model指令用于收集用户输入的待办事项(someing) -->
</form>
<input type="submit" name="" value="提交" class="input_btn" v-on:click='add()'>  <!-- 点击提交按钮时，调用add函数 -->
<input type="reset" name="" value="重置" class="input_btn" v-on:click='reset()'> <!-- 点击提交按钮时，调用reset函数 -->
</div>
<p>待办事项列表</p>
<table>
<thead>
<tr>
<th>序号</th>
<th>日期</th>
<th>待办事项</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(val,i) in arr" >
<td>{{ i+1 }}</td>
<td>{{ val.date }}</td>
<td>{{ val.someing }}</td>
<td><button v-on:click='remove(i)'>删除</button></td>
</tr>
<tr><td colspan='4' v-show='this.arr.length==0'>暂无事件</td></tr>  <!-- 如果是空数组 暂无事件显示 -->
<tr><td colspan='4' v-show='this.arr.length!=0'><button class="all_del" v-on:click='removeAll'>全部删除</button></td></tr><!-- 如果数组内有数据，全部删除显示 -->
</tbody>
</table>
</div>
</body>
</html>
<script>
var vm=new Vue({
el: '#box',
data: {
arr: [
/*{date:'0524',do:'eatting'},
{date:'1213',do:'sleeping'},
{date:'0213',do:'codding'}*/
],
bol: false,
txt: '+',
date: '',
someing: ''
},
methods: {
fn: function(){  //点击的时候改变布尔值，通过v-text指令改变页面中'+'和'-'
this.bol=!this.bol;
this.txt= this.txt=='+'?'-':'+';
},
add: function(){  //向对应数据的数组中加入用户输入的日期和待办事项
this.arr.push({ date:this.date, someing:this.someing  });  //数组追加用户输入的日期和待办事项
this.date='';  //日期文本框内清零
this.someing='';  //待办事项文本框内清零
console.log(this.someing)
},
remove: function(i){  //点击单个删除
this.arr.splice(i,1);
},
removeAll: function(){  //点击全部删除
//alert("删除")
var isTrue=confirm("确定删除吗？");
console.log(isTrue);
if(isTrue){
this.arr=[]  //数组清空
}
},
reset: function(){  //重置 清零
this.date='';  //日期文本框内清零
this.someing='';  //待办事项文本框内清零
}
}
})
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航