信息管理创新实践周记学习Vue.js（二）

本文链接：https://blog.csdn.net/weixin_48694265/article/details/117327873

本文介绍了Vue.js的条件语句`v-if`和样式绑定`v-bind:class`的使用方法。通过示例展示了如何根据条件展示元素及动态改变元素样式。还提供了一个综合练习，涉及表单验证和错误提示，进一步巩固了Vue.js的条件渲染和样式控制技巧。

摘要由CSDN通过智能技术生成

学习Vue.js（二）

一、Vue.js条件语句

条件判断v-if：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-if</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>

运行效果：
在这里插入图片描述

二、Vue.js 样式绑定

Vue.js class

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

<!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: #fff1aa;
}
.active2 {
	width: 100px;
	height: 100px;
	background: #af5700;
}
</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>

运行截图：
在这里插入图片描述

三、综合练习

<!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>