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

最新推荐文章于 2024-06-20 18:29:17 发布

小六不是路痴

最新推荐文章于 2024-06-20 18:29:17 发布

阅读量67

点赞数

文章标签： vue html

本文链接：https://blog.csdn.net/LCCCCCCHEN/article/details/118081701

版权

第十三周学习周记

Vue.js 实验内容

Vue.js 实验内容

本节课继续学习 Vue.js，并做了如下实验

1.Vue.js 条件语句

条件判断使用 v-if 指令
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.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>

展示：
在这里插入图片描述
输入8.6后

2.Vue.js 样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

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

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

3.摄氏度与华氏度之间的换算

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
		   <div>
		    输入摄氏温度：<input v-model="ctemp">
		    <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>

展示：
在这里插入图片描述

4.用户信息填写

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<style>
			p{
				width: 80%;
				margin: 0 auto;
			}
			input,
			select{
				display: inline-block;
				width: 50%;
				height: 25xp;
			}
			select{
				height: 40xp;
			}
			button{
				width: 100xp;
				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="text" v-model="user_age" min="0" max="100"></input>
			</p>
			<br />
			<p>
				<label for="user_like">爱好：</label>
				<select id="user_like" name="user_like" type="text" 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){
							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>

展示：
在这里插入图片描述
若直接点击“提交”

小六不是路痴

关注

0
点赞
踩
0

收藏

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

第十三周学习周记Vue.js 实验内容1.Vue.js 条件语句2.Vue.js 样式绑定3.摄氏度与华氏度之间的换算4.用户信息填写Vue.js 实验内容本节课继续学习 Vue.js，并做了如下实验1.Vue.js 条件语句条件判断使用 v-if 指令代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <scri
复制链接

扫一扫