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

Posted 2021-03-23 eliwen

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

　　

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