Vue:本地应用3-记事本

2022-6-25

v-for指令

根据数据生成列表结构

数组经常与v-for结合使用

语法（item,index）in 数据

	<body>
		<div id="app">
		    <ul>
				<li v-for="(it,index) in arr">
					{{index+1}}.我在:{{it}}
				</li>
			</ul>	
			<input type="button" value="添加数据" @click="add" />
			<input type="button" value="移除数据" @click="remove"/>
			<h2 v-for="item in vagetable" v-bind:title="item.name">
				{{item.name}}
			</h2>
		</div>
	</body>
	<!-- 开发环境版本，包含了有帮助的命令行 警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
       var app = new Vue({
		   el:"#app",
		   data:{
			   arr:["北京","山东","山西","深圳"],
			   vagetable:[
				   {name:"西瓜"},
				   {name:"葡萄"}
			   ]
		   },
		   methods:{
			   add:function(){
				   this.vagetable.push({name:"哈哈哈"})
			   },
			   remove:function(){
				   this.vagetable.shift();
			   }
		   }
	   })
	</script>

v-on补充

事件绑定可以写成函数调用的形式，传入自定义参数

事件后面跟上 .修饰符可以对事件进行限制

.enter 可以限制触发的案件为回车

	<body>
		<div id="app">
			<input type="button" value="点击" @click="doIt(666,'老铁')" >
			<!--点回车执行这个方法-->
			<input type="text" @keyup.enter="sayHi">   点回车执行这个方法
		</div>
	</body>
	<!-- 开发环境版本，包含了有帮助的命令行 警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
       var app = new Vue({
		   el:"#app",
		   methods:{
			   doIt:function(p1,p2){
				   console.log("做it"),
				   console.log(p1),
				   console.log(p2)
			   },
			   sayHi:function(){
				   alert("您点了回车");
			   }
			 },
		   })
	</script>

v-model指令

便捷的设置和获取表单元素的值

	<body>
		<div id="app">
			<input type="text" v-model="message" />
			<h2>{{message}}</h2>
		</div>
	</body>
	<!-- 开发环境版本，包含了有帮助的命令行 警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
       var app = new Vue({
		   el:"#app",
		   data:{
			   message:"tinstu"
		   },
		   methods:{
			   getM:function(){
				   alert(this.message);
			   }
		   }
	   })
	</script>

记事本案例

	<body>
		<section id="app">
			<header>
				<h1>记事本</h1>
				<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务">
			</header>
			<!--列表区域-->
			<section>
				<ul>
					<li v-for="(item,index) in list"> 
						<span>{{index+1}}</span>
						<label>{{item}}</label>
						<button @click="remove(index)">delete</button>
					</li>
					
				</ul>
			</section>
			<!--统计和情况-->
			<footer>
				<span v-if="list.length!=0"><strong>{{list.length}}</strong>条数据</span>
				<button v-show="list.length!=0" @click="clear">clear</button>
			</footer>
		</section>
		<!--底部-->
		<footer>
			
		</footer> 
	</body>
	<!-- 开发环境版本，包含了有帮助的命令行 警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
       var app = new Vue({
		   el:"#app",
		   data:{
			   list:["aaa","bbbb","cccc"],
			   inputValue:"好好学习"
		   },
		   methods:{
			   add:function(){
				   this.list.push(this.inputValue);
			   },
			   remove:function(index){
				   this.list.splice(index,1);  <!--从哪删，删几个-->
			   },
			   clear:function(){
				   this.list=[];
			   }
		   }
	   })

	</script>

阅读剩余

作者：Tin

链接：http://www.tinstu.com/2137.html

文章版权归作者所有，未经允许请勿转载。

THE END