首页 > 其他 > 详细

案例-todolist计划列表【添加计划】

时间:2019-12-15 12:22:06      阅读:76      评论:0      收藏:0      [点我收藏+]
<div class="list_con" id="todolist">
		<h2>To do list</h2>
		<input type="text"  v-model="text" id="txt1" class="inputtxt">
		<input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="add">

		<ul id="list" class="list">
			<li v-for="data in data_list">
				<span>{{data}}</span>
				<a href="javascript:;" class="up">↑</a>
				<a href="javascript:;" class="down">↓</a>
			    <a href="javascript:;" class="del">删除</a>
			</li>
		</ul>
	</div>
	<script>
		var vm = new Vue({
			el:"#todolist",
			data:{
				text:"",
				data_list:[
					"学习html",
					"学习css",
					"学习js",
				]
			},
			methods:{
				add(){
					if(this.text==""){
						return false
					}
					this.data_list.push(this.text);
					this.text="";
				}
			}
		})
	</script>

  

加上了判断防止用户重复提交空的列表内容

案例-todolist计划列表【添加计划】

原文:https://www.cnblogs.com/eliwen/p/12042196.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!