vue基础的一个小练习小马记事本

最新推荐文章于 2022-12-09 16:43:17 发布

MW0309

最新推荐文章于 2022-12-09 16:43:17 发布

阅读量205

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_42222342/article/details/104210133

版权

Vue 专栏收录该内容

64 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小马记事本</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			ul li {
				list-style-type: none;
			}
			.m1{
				border: 10px solid red;
				margin: 0 auto;
			}
			.m2{
				text-align: center;
			}
			.m3{
				float: right;
			}
		</style>
	</head>

	<body>
		<div class="m1">
			
		<div id="root">
			<div class="m2">
				<h1>小马记事本</h1>
				<input v-model="inputValue" />
				<button @click="handleSubmit"> 提交</button>
			</div>
			<ul>
				<li v-for="(item,index) of list" :key="index">
					{{index+1}}
					{{item}}
				</li>
			</ul>
			{{list.length}}
			<button class="m3"           @click="clear">
				清空
			</button>
		</div>
		</div>
		<script>
			new Vue({
				el: "#root",
				data: {
					inputValue: '',
					list: []
				},
				methods: {
					handleSubmit: function() {
						this.list.push(this.inputValue)
						this.inputValue = ''
					},
					clear:function(){
						this.list=[];
					}
				}
			})
		</script>
	</body>
</html>