VUE 03 属性绑定，类绑定，循环，计算方法，表单传值

最新推荐文章于 2024-07-06 17:06:11 发布

子非鱼emma

最新推荐文章于 2024-07-06 17:06:11 发布

阅读量590

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_38998319/article/details/117448947

版权

VUE 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1绑定属性 :style="{'color':'red',属性:属性值}

<style>
	*{
		margin: 0;
		padding: 0;
	}
	button{
		width: 400px;
		height: 200px;
		font-size: 50px;
	}
</style>

<body>
	<div id='app' >

		<!-- {{fun()}} -->	<!-- 这个地方不注释执行36行就报错，不知道为什么难过呀，这vue源码也看不明白呀 -->
		<!-- <button :style="{'color':'red',属性:属性值}">我是按钮</button> -->

		<button :style="{'color':color}">这是按钮</button><br>
		<!-- 按钮颜色为data中的color  --- 绿色 -->


		<button :style="{'color':bool?'red':'green'}">这是按钮</button><br>
		<!-- 当bool的值为ture时按钮的颜色为红色，当bool的值为false是按钮的颜色为绿se -->

		
		<button @click="fun() ":style="{'color':color}">点击我可调用vue中的fun方法</button><br>
		<!-- 点击按钮调用fun函数，随机生成rgb颜色值 ，传给color——点击后可随机生成颜色 -->


	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			color:'green',
			bool:true
		},
		methods:{
			/*
			fun:function(){
				alert(123);
			}
			*/
			//简写为:函数名(){}
			// fun(){
			// 	alert(123);
			// }
			fun(){
				var randColor = 'rgb('+this.rand()+','+this.rand()+','+this.rand()+')';
				this.color = randColor;
			},
			rand(){
				return Math.floor(Math.random()*255);
			}
		}
	})
</script>

2.vue动态绑定class（对象和数组的方式）

<!DOCTYPE html>
<html>
<head>
	<title>vue动态绑定class</title>
	<meta charset="utf-8">
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style type="text/css">
		.a1{
			color:red;
		}
		.a2{
			font-size:30px;
		}
		.bg{
			background-color:#7bb707;
			color:green;
		}

	</style>
</head>
<body>
	<div id='app' style="font-size: 50px;">
<!-- ----------------vue动态绑定class的几种方式 -->
<h1>====对象绑定class</h1>
<!-- 	
=====1.对象
	    1.最简单的绑定
	     :class='{属性:布尔值}'
 -->		 
<a href="" :class="{'a1':bool}">对象绑定基础</a><br>
<!-- bool的值为true所以a标签就具有a1这个类 -->
<!-- 
		2.判断变量的值是否是某一个值
		:class='属性:num=1'
-->		
<a href="" :class="{'a1':num==1}">判断变量的值是否是某一个值</a><br>
<!-- 
		3.绑定多个判断
		  第一种：
		  :class="{'属性1':布尔值,'属性2':布尔值}"

		  第二中：
		       把对象存储在data中
			   classObj:{'a1':true,'a2':true}
-->
<a href="" :class="classObj">绑定多个判断</a><br>
<!-- 等价于 -->
<a href="" :class="{'a1':true,'a2':true}">绑定多个判断</a><br ><br >

<h1>====数组绑定class</h1>
<!-- 
=====2.数组：
	    1.单纯的数组
	     :class='[属性1,属性2]'
	     :class='[变量1,变量2]'
	      data:{
		  变量1:属性1,
		  变量2:属性2
	      }
 -->
 <a href="" :class="[isA1,isA2]">数组基本应用(变量)</a><br> 
<a href="" :class="['a1','a2']">数组基本应用（类名,记得加引号）</a><br> 
<!-- 
	    2.数组与三元运算符结合判断是否需要设置class
	     :class='[isBool?"a1":""]'
 -->
<a href="" :class="[isBool?'a1':'']"> 数组与三元运算符结合判断是否需要设置class</a><br>
<a href="" :class="[num==1?'a1':'']">数组与三元运算符结合判断是否需要设置class2</a>	  <br>  
<a href="" :class="[isBool?'a1':'a2']">isBool是false 只有a2这个类</a><br>
<!-- 
3.数组和对象组合使用
	     :class='[a1:isBool],"a2"]'
 -->
 <a href="" :class="[{'a1':isBool},'a2']" class="bg">这样可以控制a2这个类绝对有，a1根据需求有</a><br>
</div>
</body>
<script>
	new Vue({
		el:'#app',
		data:{
			bool:true,
			num:1,
			classObj:{'a1':true,'a2':true},
			isA1:'a1',
			isA2:'a2',
			isBool:false
		},
		methods: {
			fun(){
				this.bool=!this.bool;
			}
		},
	})
</script>
</html>

3.vue中的循环 v-for

<!DOCTYPE html>
<html>
<head>
	<title>vue中的循环</title>
	<meta charset="utf-8">
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id='app'>
<!-- 
		什么是循环？？
		   读取数组中的值:将数组一个一个的读出来
		vue中如何声明数组
		   [值,值.....]
		vue 中循环的语法
		    v-for 指令
		 语法格式:
		    v-for:'(值,键) in 数组' :key 不会被渲染的dom中

 -->
        arr[0]的值为:{{arr[0]}}
<br><br><br>
		
		<!-- v 存储的是每一次循环的值 k 每一次循环的键(下标) -->
		循环输出arr数组<p v-for='(v,k) in arr':key='k'>{{v}}</p>
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			// 声明一个数组
			arr:[123,465,234,567,45,34,654,34]
		}
	})

</script>
</html>

4.vue中的循环（多选框案例 key=v）

body>
	<div id="app">
		<input type="text" v-model='inval'>
		<button @click='fun()'>添加</button>
		<ul>
			<li v-for="(v,k) in arr" >
				<input type="checkbox" name="" id="">
				{{v}}
			</li>
			<!-- 
						html  0  √
						vue   0 ->1  
						js    1 ->2
						jq    2 ->3


						vue   vue  √
						vue    vue  
						js     js
						jq     jq

						使用key=v 的目的是使数组的键和值相等,
						避免新添加元素后下标改变(第一个下标本来是0,添加一个元素后就变成1了),
						影响原有input输入框的选中状态
				 -->
			
		</ul>
		<!-- 
			1.:key的值要唯一
			2.key的作用是什么?? 用于高效的虚拟DOM
			3.什么是虚拟DOM?
				就是一个js对象来访问我们的html结构(使用js完成dom的渲染)
		 
				例如:
					let a = 1;
						a = 2;
						...
						a = 7
					页面上渲染的的a 是 7


		 -->
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			inval:'',
			arr:['PHP','JS','VUE']
		},
		methods: {
			fun(){
				this.arr.unshift(this.inval)
			}
		},
	})
</script>

5.计算方法和普通方法的对比

<!DOCTYPE html>
<html>

<head>
	<title>计算方法</title>
	<meta charset="utf-8">
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
	<div id="app">
		<!--fun() 每一次调用都会被执行一次 -->
		{{fun()}}
		{{fun()}}
		<br><br>
		<!-- fun2 计算方法在调用的时候,不需要加() -->
		{{fun2}}
		{{fun2}}
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			obj: {
				name1: '李四',
				name2: '张三'

			}
		},
		/* 	
			普通方式什么的方法和计算方法
			  区别:
			  1.普通方法在调用的时候,需要加(),计算方法不需要加()
			  2.从运算结果来看,普通方法,可以多次调用,但是多次调用需要执行多次
			    计算方法,在值没有发生改变的时候,只执行一次,但是数据正常渲染
		 */
		methods: {
			fun() {
				console.log('我是fun方法,我被执行了');
				return this.obj.name1+' '+this.obj.name2;

			}
		},
		computed: {
			fun2() {
				console.log('我是funw2方法,我被执行了');
				return this.obj.name1+' '+this.obj.name2;
			}
		}
	})


	// 美 /kəmˈpjuːtɪd/
</script>

</html>

6.表单传值案例

<!DOCTYPE html>
<html>
<head>
	<title>计算方法</title>
	<meta charset="utf-8">
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>	
	<div id="app">
<!-- v-model 双向数据绑定 -->

<input type="radio" name="sex" value="1" v-model='sex'>男1
<input type="radio" name="sex" value="0" v-model='sex'>女1
<!-- 在这里v-model的值为表单value的值,当女被选中 sex的值为0 传给了data中的sex -->

<p>{{sex=='1'?'选择了男':'选择了女'}}</p>
<!-- data中的sex的值(0)就传给了p标签中的sex -->

<!--只有一个多选框 -->
<input type="checkbox" name="" v-model='isOk'>《你tm必须同意!!》
<!-- 多选框为选中时value的值默认为false 选中则为true -->
<p>{{isOk}}</p>


<!-- 多个多选框 -->
<input type="checkbox" value="唱" name="" v-model='hobby'>唱
<input type="checkbox" value="跳" name="" v-model='hobby'>跳
<input type="checkbox" value="rap" name="" v-model='hobby'>rap
<input type="checkbox" value="篮球" name="" v-model='hobby'>篮球
<p>{{hobby}}</p>

<!-- select option 下拉列表 -->
<select  v-model='type'>
	<option value="唱">唱</option>
	<option value="跳">跳</option>
	<option value="rap">rap</option>
	<option value="篮球">篮球</option>
</select>
<p>你想学习什么项目:{{type}}</p>
	</div>
</body>
<script type="text/javascript">
new Vue({
	el:'#app',
	data:{
		str:'',
		sex:'1',
		isOk:false,
		hobby:[],
		type:'数学'
	},
	methods: {
		
	},
})
</script>
</html>

7.数组中的方法复习

<head>
	<title>计算方法</title>
	<meta charset="utf-8">
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
	<div id="app">

	</div>
</body>
<script type="text/javascript">
	/*
	push():方法可以在数组的末属添加一个或多个元素
    shift()方法把数组中的第一个元素删除
    unshift():方法可以在数组的前端添加一个或多个元素
    pop():方法把数组中的最后一个元素删除
	concat():多个数字连接成一个
	filter()  过滤
	*/
// 需求过滤掉大于8的数,返回小于等于8的数
	var arr=[1,34,43,5,56,65,44,33];
	var newArr=arr.filter(function(val,key){
		console.log(val);
		if(val>8){
			return false;

		}else{
			return true;
		}
	})
	console.log(newArr);

</script>