HTML CSS JAVASCRIPT 学习周记第十三周_html+js+mysql+css实习周志-优快云博客

本文链接：https://blog.youkuaiyun.com/Catsdoge/article/details/117327765

本周学习重点集中在Vue.js上，包括使用v-bind动态绑定样式和深入理解Vue.js的表单处理。通过实验1，掌握了v-bind在CSS样式应用上的灵活性；实验2则探讨了Vue.js中如何有效地管理和响应表单数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML CSS JAVASCRIPT 学习周记第十三周

实验1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue 测试实例 - 菜鸟教程(runoob.com)</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>

v-bind 样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
	fontSize: 50
  }
})
</script>
</body>
</html>

实验2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active1{
	width:100px;
	height:100px;
	background:yellow;
	}
.active2{
	width:100px;
	height:100px;
	background:darkred;
	}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="{'active1':isActive,'active2':!isActive}"></div>
  <br>
  <button v-on:click="isActive=!isActive">点击换色</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
     isActive:true
  }
})
</script>
</body>
</html>

Vue.js 表单
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
	
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
	checked : false,
    checkedNames: []
  }
})
</script>
</body>
</html>

实验3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</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: 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_from"@submit="checkFrom">
<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">
</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_from',
  data: function(){
	  return{
		  errMsg:[],
		  user_name:null,
		  user_age:null,
		  user_like:null
	  }
	  },
	  methods:{
		  checkFrom(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.push){
			  				  return true
			  }
			  e.preventDefault()
		  }
	  }
})
</script>
</body>
</html>