案例-todolist计划列表删除计划

Posted 2021-03-22 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" @click="del(key)">删除</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="";
				},
                del(key){
				    // 删除计划
                    // 数组.splice(开始下标,删除个数,替换内容1,替换内容2)
                    this.data_list.splice(key,1)

                }
			}
		})
	</script>

　　

使用方法 数组.splice (开始下标,删除个数,替换内容1,替换内容2)