Vue 记事本界面

最新推荐文章于 2024-08-07 09:26:20 发布

清風明月_xf

最新推荐文章于 2024-08-07 09:26:20 发布

阅读量259

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41597943/article/details/131123885

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章展示了一个使用HbuilderX开发的基于Vue.js的本地应用，该应用具有创建、删除和清除列表项功能。HTML结构定义了页面布局，JavaScript处理数据绑定和方法，CSS用于样式设计，提供了添加、删除和清除按钮操作列表项。

摘要由CSDN通过智能技术生成

本地应用-记事本

1. 前端编译器 Hbuilder X

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <title></title>
    <!--preload-links-->
    <!--app-context-->
	<script src="vue.js" type="text/javascript" charset="UTF-8"></script>	
  </head>
  
  //html
  <body>
	  <section id='todoapp' >
		  <header class='head'>
			<input style="position: relative;width: 90%;height: 25px;margin: 25px;" 
			autofocus='focus' autocomplete="off" placeholder="请输入内容" v-model="inputString">
		  </header>
		  <!-- 列表区域 -->
		  <section class='main' style='position: relative' >
			  <fieldset class='todo-li' >
				  <legend>计算机网络的发展历史</legend>
				  <li class='todo' style="list-style-type: none;" v-for="(item,index) in list">
					  <div class='view'> <!--div包裹了以下-->
						  <span class='index'>{{index+1}}.{{''}}</span>
						  <label>{{item}}</label>						  						  
					  </div>					  
				  </li>				  
			  </fieldset>
			  <button class='add-btn' v-on:click="added()">添加</button>
			  <button class='del-btn' @click="deleted(index)">删除</button>
			  <button class='complete-clr' @click="cleared()">清除</button>
		  </section>
		  <section class='foot' v-for="list.length!=0">
			总共<span class='todo-count'><strong>{{list.length}}</strong></span>	个列表项		
		  </section>
	  </section>
	
	//js  
	<script>		
		var app=new Vue({
			el:'#todoapp',
			data:{
				list:['第一代计算机主机面向无终端的网络',
				'第二代以通信子网和资源子网为中心',
				'第三代以Internet为中心的新一代网络'],
				inputString:''
			},
			methods:{
				added:function(){
					// this.list+=this.inputString 数组怎么增加元素
					this.list.push(this.inputString)
				},
				deleted:function(index){
					this.list.splice(index,1)
				},
				cleared:function(){
					this.list=[]
				},
			}			
		})		
	</script>
	
	//css
	<style>
		#todoapp{
			width: 80%;
			min-height: 250px;
			border: 1px solid black;
			font-family: 'Lucida Console', monospace;
			font-size: 14px;
			line-height: 1.5;
			padding: 5px;
			border: 2px solid #ccc;
			border-radius: 5px;
			box-shadow: 0 0 5px #ccc;
			background-color: #f1f1f1;
			color: #000;
		}		
		.todo-li{
			background-color: lightblue;
			color: black;
			border: 2px solid black;
			border-radius: 10px;
			padding: 10px 20px;
			font-size: 16px;
			text-align: left;
			/* list-style-image: url(./static/logo.png); */
		}
		.add-btn,.del-btn,.complete-clr{
			  background-color: red;
			  color: white;
			  border: 2px solid black;
			  border-radius: 10px;
			  padding: 5px 10px;
			  margin: 10px;
			  font-size: 16px;
			}
		.add-btn{
			  position:absolute;
			  right: 140px;
			}
		.del-btn{
			 position:absolute;
			  right: 70px;
			}
		.complete-clr{
			background-color: rosybrown;
			position:absolute;
			right: 0px;
			}
		}		
	</style>
		
  </body>
</html>