使用Vue框架实现待办事项功能

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>v-for</title></head><script ...

chunzhuang9775

2673人浏览 · 2017-05-24 18:07:00

chunzhuang9775 · 2017-05-24 18:07:00 发布

<!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>

转载于:https://my.oschina.net/u/3490747/blog/908368

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^