码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-12-15 12:18:39      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:重复   提交   计划   name   asc   down   ext   txt   NPU   

<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计划列表【添加计划】

标签:重复   提交   计划   name   asc   down   ext   txt   NPU   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!