vue学习日记Day3（想找vue大佬带带）

最新推荐文章于 2023-07-16 10:00:00 发布

屁小屁小屁

最新推荐文章于 2023-07-16 10:00:00 发布

阅读量202

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/pjxaaaaa/article/details/112195912

版权

vue学习日记Day3：

有没有大佬求带，或者我可以求教一些问题，自己一个人每天能遇到很多问题，自己可以琢磨出来一部分，但是很是有一些问题没有得到解决，导致效率和进度都不是特别快。今天发一些小练习还有一个框架。

zui：

点这里去下载zui

1.进入官网后点击下载。
在这里插入图片描述
2.新建一个css文件并且解压在这里面

3.在vue代码里面写这个，写个开头link就会自己把后面的弹出来

<link rel="stylesheet" type="text/css" href="css/dist/css/zui.css"/>

4.在官网里面找到自己喜欢的样式
在这里插入图片描述

一些小练习：

（1）计时器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 
	</head>
	<body>
		<div id="app">
			<button @click="jishi" type="begin">开始计时</button><br>
			{{number}} <br>
			<button @click="tingzhi" type="stop">停止计时</button>
		</div>
		
		
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					number:0,
				},
				methods:{
					jishi(){
						time = setInterval(function(){
							app.number++;
						},1000)
					},
					tingzhi(){
						clearInterval(time);
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
点击开始计时就可以计时，点击停止计时，结束。

（2）计算各科总分和平均分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 
		<link rel="stylesheet" type="text/css" href="dist/css/zui.css"/>
		<title></title>
	</head>
	<body>
		<div id="app">
			<table border=1>
				<tr>
					<th>学科</th>
					<th>分数</th>
				</tr>
				<tr>
					<th>语文</th>
					<th><input type="text" v-model.number="yuwen"/></th>
				</tr>
				<tr>
					<th>数学</th>
					<th><input type="text" v-model.number="shuxue"/></th>
				</tr>
				<tr>
					<th>英语</th>
					<th><input type="text" v-model.number="yingyu"/></th>
				</tr>
				<tr>
					<th>总分</th>
					<th><input type="text" v-model.number="sum"/></th>
				</tr>
				<tr>
					<th>平均分</th>
					<th><input type="text" v-model.number="aver"/></th>
				</tr>
			</table>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					yuwen:0,
					shuxue:0,
					yingyu:0,
					
					
					
				},
				methods:{
					
				},
				computed:{
					
					sum(){
						return parseInt(this.yuwen)+parseInt(this.yingyu)+parseInt(this.shuxue);
					},
					aver(){
						return parseInt(this.yuwen)/3+parseInt(this.yingyu)/3+parseInt(this.shuxue)/3;
					},
					
				}
				
			})
		</script>
	</body>
</html>

在这里插入图片描述
由于是数据双向绑定，可以随便改数字，然后重新计算。

（3）内容切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			
			
		</style>
	</head>
	<body>
		<div id="app">
			<h3 v-show="tab==1">首页</h3>
			<h3 v-show="tab==2">new</h3>
			<h3 v-show="tab==3">个人</h3>
				
			<button @click="shou1">首页</button>
			<button @click="shou2">new</button>
			<button @click="shou3">个人</button>	
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					
					tab:1,			
				},
				methods:{
					shou1(){
						this.tab=1;
					},
					shou2(){
						this.tab=2;
					},
					shou3(){
						this.tab=3;
					},	
				}		
			})
		</script>
	</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/2021010419385255.png

总结：

对之前所学到的东西所做的小练习，比较基础，还是想找个大佬带一带。平时学习过程中就可以请教一些解决不了的问题。哎~~~

屁小屁小屁

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习日记Day3（想找vue大佬带带）

vue学习日记Day3：有没有大佬求带，或者我可以求教一些问题，自己一个人每天能遇到很多问题，自己可以琢磨出来一部分，但是很是有一些问题没有得到解决，导致效率和进度都不是特别快。今天发一些小练习还有一个框架。zui：点这里去下载zui1.进入官网后点击下载。2.新建一个css文件并且解压在这里面3.在vue代码里面写这个，写个开头link就会自己把后面的弹出来<link rel="stylesheet" type="text/css" href="css/dist/css/zui
复制链接

扫一扫