信息管理创新实践学习周记13

芝芝莓莓少少冰

于 2021-07-01 21:53:22 发布

阅读量95

点赞数

分类专栏：信息管理创新实践学习笔记

本文链接：https://blog.csdn.net/weixin_48813559/article/details/118398979

版权

信息管理创新实践学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

信息管理创新实践学习周记13

实验1：个人信息填写
- 代码
- 实验结果
实验2：温度转华氏度
- 代码
- 实验结果
实验3：颜色变化
- 代码
- 实验结果
实验4：数字输入
- 代码
- 实验结果

实验1：个人信息填写

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<style>
			p{
				width:80%;
				margin:0 auto;
			}
			input,
			select{
				display:inline-block;
				width:50%;
				height:25px;
			}
			select{
				height:40px;
			}
			button{
				width:100px;
				background:rgb(41;135;243);
				color:white;
			}
			.err_content li{
				color:red;
			}
		</style>
	</head>
	<body>
		<form id="my_form" @submit="checkForm">
			<div class="err_content" v-if="errMsg.length">
				<b>错误提示：</b>
				<ul>
					<li v-for="err in errMsg">{{err}}</li>
				</ul>
			</div>
			<p>
				<label for="user_name">姓名：</label>
				<input id="user_name" name="user_name" type="text" v-model="user_name"></input>
			</p>
			<br>
			<p>
				<label for="user_age">年龄：</label>
				<input id="user_age" name="user_age" type="number" v-model="user_age" min="0" max="100">
			</p>
			<br>
			<p>
				<label for="user_like">爱好：</label>
				<select name="user_like" id="user_like" v-model="user_like">
					<option value="0">看书</option>
					<option value="1">写代码</option>
					<option value="2">看代码</option>
				</select>
			</p>
			<br>
			<p>
				<button type="submit">提交</button>
			</p>
		</form>
		
		<script type="text/javascript">
			new Vue({
				el:'#my_form',
				data:function(){
					return{
						errMsg:[],
						user_name:null,
						user_age:null,
						user_like:null
					}
				},
				methods:{
					checkForm(e){
						this.errMsg=[]
						if(!this.user_name){
							this.errMsg.push('用户姓名不能为空')
						}
						if(!this.user_age){
							this.errMsg.push('年龄格式输入错误')
						}
						if(!this.user_like){
							this.errMsg.push('用户爱好不能为空')
						}
						if(!this.errMsg.length)
							return true
						e.preventDefault()
					}
					
				}
			});
			
		</script>
	</body>
</html>

实验结果

在这里插入图片描述

实验2：温度转华氏度

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
			请输入摄氏温度：<input v-model="ctemp">
			<br>
			<br>
			华氏温度：<child v-bind:temp="ctemp"></child>
			</div>
		</div>
		<script type="text/javascript">
			Vue.component('child',{
				props:{
					['temp']:Number,
				},
				template:'<span>{{temp*9/5+32}}</span>'
			})
			new Vue({
				el:'#app',
				data:{
					ctemp:0
				}
			})
		</script>
	</body>
</html>

实验结果

在这里插入图片描述

实验3：颜色变化

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<style>
			.active{
				width:100px;
				height:100px;
				background:green;
			}
			.active2{
				width:100px;
				height:100px;
				background:yellow;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="{active:isActive,active2:!isActive}">
				<br>
			</div>
			<button v-on:click="isActive=!isActive">点击我</button>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					isActive:true
				}
			})
		</script>
	</body>
</html>

实验结果

点击前：在这里插入图片描述
点击后：

实验4：数字输入

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			请输入1-10：<input type="text" v-model="type">
			<div v-if="type>1&&type<10">
			true
			</div>
			<div v-else>
				false
			</div>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					type:''
				}
			})
		</script>
	</body>
</html>

实验结果

在这里插入图片描述

芝芝莓莓少少冰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
信息管理创新实践学习周记13

信息管理创新实践学习周记13实验1：个人信息填写代码实验结果实验2：温度转华氏度代码实验结果实验3：颜色变化代码实验结果实验4：数字输入代码实验结果实验1：个人信息填写代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue/dist/vue.js">&
复制链接

扫一扫