vue实例练习，计数功能，图片切换，记事本功能

最新推荐文章于 2023-04-14 09:04:00 发布

我爱工作&工作love我

最新推荐文章于 2023-04-14 09:04:00 发布

阅读量258

点赞数

分类专栏：前端学习文章标签： vue

本文链接：https://blog.csdn.net/m0_46183615/article/details/109442089

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

vue实例练习
1.简单的计数功能
2.实现的图片的切换
3.实现记事本功能（未完待续）
涉及知识点
学完vue最基础部分即可
视频学习来源:b站黑马程序员

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>简单的回顾一波</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			
			#border
			{
				positon:relative;
				display:inline-block;
				width:100%;
				text-align:center;
				
				border:0.5px solid black;
				border-radius:4px 4px 4px 4px;
			}
			.matter
			{
				background:pink;
				display:inline-block;
				width:100%;
			}
			.border1 
			{
				display:flex;
				width:100%;
				height:100px;
				
				justify-content:center;
				
				border-radius:5px  5 5  5px;
				
			}
		#flex2
		{
			display:flex;
			width:100%;
				height:500px;
			
			justify-content:center;
		
			
		}
		
			.border2
			{
				border:none;
				border-radius:5px 5px 5px 5px;
				width:70px;height:60px;position:relative;float:left;background:lightgray;
			}
			.border3
			{
				border:none;
				border-radius:5px 5px 5px 5px;
				background:lightgray;width:70px;height:60px;position:relative;float:right;
			}
			.question
			{
				font-size:12px;
				
				
			}
			.answer
			{
				color:orange;
			}
			img
			{
				height:400px;
				
				background:blue;
			}
			.right
			{
				position:relative;
				display:inline-block;
				width:40px;
				height:50px;
				float:right;
			}
			.left
			{
				position:relative;
				display:inline-block;
				width:40px;
				height:50px;
				float:left;
			}
				
			.table
			{
				
				display:inline-block;
				width:210px;
				background:#f5f5f5;
				border:0.2px lightgrey solid;
				
			}
			.input
			{
				
				background:white;
				width:206px;
			}
			
		</style>
	</head>
	<body >
		<div id="border" style="margin-right:0;">
			鹅是猪吧？虽看得不快，却还是忘掉了看过的那么多知识点。
		</div>
		<div id='app'>
			<p style="color:indianred ">Please remember:ol为有序列表，ul为无需列表</p>
			<ol style='margin-left:0;'>
				<li v-for="words in line">{{words.text}}</li>
			</ol>
	<!--实例1-->
				<p class="matter">敲重点1：Vue实现简单是计数器-点击加减即可计数（ps：这里是简单的Vue实例，知道基础methods,,,就可以上手）</p>
			<div class="border1" >
				<div id='flex'>
					<button @click="add"  class="border2"style="">+</button>
					<span style=" display:inline-block;width:70px;height:60px;position:relative;text-align:center;line-height:60px;background:whitesmoke;">{{data1}}</span>
					<button @click="reduce" class="border3"style="">-</button>
				</div>
				
			</div>
			<!--问题区-->
		
			<ul >
				<li>
					<p class="qustion">怎样让实现按钮没有边框且为自定义的圆角矩形？</p>
					<p class="answer">1.设置border:none;border-radius:Ypx Ypx Ypx Ypx;从左上角开始为顺时针方向设置（ps:也可以是百分数）</p>
				</li>
				<li>
					<p class="qustion">怎样让span内的文字居中（水平垂直）对齐？</p>
					<p class="answer">设置display:inline-block;然后text-align:center;(设置水平对齐,只适用于块级元素)最后:line_height: Xpx;(设置行高，即可垂直居中)</p>
				</li>
			</ul>
			<p style="color:indianred ">please remember:浮动的时候要相对于父节点浮动滴</p>
			
<!--实例2-->
	<p class="matter">敲重点2:实现按钮点击切换图片功能</p>
	<div id="flex2">
		
				<div  style="display:inline-block;height:auto;width:auto;text-align:center;">
							<p>这是那些年学PS，AI做的图标和页面，我知道it　is　ugly　(￣ε(#￣)☆╰╮o(￣皿￣///)</p>
							
							<!--左箭头-->
							<a @click="left" v-show="index!=0">
								<img class='left'src="./img/left.png"/>
							</a>
							<img :src="array[index]" alt=""/ style="padding:0px;margin-left:0px;">
					
							<!--右箭头-->
							<a  class="right"@click="right"v-show="index<array.length-1">
								<img class='right' src="./img/right.png"/>
							</a>
				</div>
	</div>
		
			<!--问题区-->
					
			<ul >
				<li>
					<p class="qustion">怎样实现图片的切换？</p>
					<p class="answer">1.首先将图片的地址储存在数组中，只有地址时不用数组变量{}，只需要“双引号括起来就好”用’:‘v-for的缩写）数组索引地址</p>
					<p class="answer">2.用@方法使得点击是切换到下一张图（使得数组下标+/-1），同时用v-show的方法实现该键的隐藏</p>
				</li>
			</ul>
			
<!--实例3-->			
			<p style="color:indianred ">please remember:浮动的时候要相对于父节点浮动滴</p>
			<p class="matter">实现一个记事本功能，有用户输入框，表单储存(未完待续)</p>
			<div class='table'>
				<input type='text' class='input'></input>
				
				<div class='table'>
					<ol>
						<li v-for='th in things'>{{th}}</li>
					</ol>
					
				</div>
			</div>
				
			
		</div>
		<p style="display:block;width:450px;margin:0 auto;color:pink;">叮~叮叮，短短几行代码，是小可爱一周的心血~~^*^~~</p>
		<script type="text/javascript">
			var app=new Vue
			({
				el:'#app',
				data:
				{
					line:
					[
						{text:'这么快就忘了，鹅该不会是pig吧'},
						{text:'知道为什么鹅的Vue有问题嚒？'},
						{text:"因为这个要用到Vue的文件需要:新建项目-选择普通项目普通模式（html中引用Vue）"}
					],
					data1:1,
					array:
					[
						"./img/1.jpg",
						'./img/2.jpg',
						'./img/3.jpg'
					],
					index:0,
					things:
					[
						"想吃饭饭",
						"想睡觉觉"
					]
					
				},
				methods:
				{
					add:function()
					{
						if(this.data1>=20)
						{
							alert("不要加仓啦！")
						}
						else
						{
							this.data1++;
						}
						
					},
					reduce:function()
					{
						if(this.data1<=0)
						{
							alert("不能减仓啦!")
						}
						else
						{
							this.data1--;
						}
					},
					right:function()
					{
						this.index++;
					},
					left:function()
					{
						this.index--;
					}
				}
			});
			
		</script>
		
	</body>
</html>

我爱工作&工作love我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
vue实例练习，计数功能，图片切换，记事本功能

vue实例练习1.简单的计数功能2.实现的图片的切换3.实现记事本功能（未完待续）涉及知识点学完vue最基础部分即可视频学习来源:b站黑马程序员<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>简单的回顾一波</title> <script src="js/vue.js" type="text/javascript" chars
复制链接

扫一扫