vue简单记事本制作

vue简单记事本的制作

<div id="jishi">
		<h2>记事本练习
		</h2>
		<section>
			<input type="text" placeholder="请输入内容" v-model="message2" @keyup.enter="add2" />
			<div v-for="(name, index) in list" id="book">
			 <span class="index">{{ index+1 }}</span> 
			 <label>{{ name }}</label>
			 <button type="button" @click="shan(index)">×</button>
			</div>
			<footer class="zuo" v-show="list.length!=0">
				{{ list.length }}items
			</footer>
			<footer class="you">
				<a href="javascript:void(0)" @click="clear" style="text-decoration: none;">clear</a>
			</footer>
		</section>
		</div>
		<script>
		var jishi = new Vue({
			el:"#jishi",
			data:{
				list:["写代码","吃饭饭","睡觉觉"],
				message2:"加油",
			},
			methods:{
				add2:function(){
					this.list.push(this.message2)
				},
				clear:function(){
					this.list=[]
				},
				shan:function(index){
					console.log("删除")
					console.log(index+1)
					this.list.splice(index,1)
				}
			}
		})
	</script>

效果图