vue学习日记Day8

最新推荐文章于 2022-05-19 11:13:48 发布

屁小屁小屁

最新推荐文章于 2022-05-19 11:13:48 发布

阅读量145

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/pjxaaaaa/article/details/112544918

版权

vue学习日记Day8：

对事件属性绑定进行一个更清楚的补充，感觉这个地方比较难，自己进度有点慢，还有一个是对Day6中的复杂遍历，利用绑定实现的一个小练习。

绑定事件属性：

1.给v-bind:class 了一个对象目的是为了动态切换class
2.动态绑定的样式可以和静态样式共存
3.class的表达式过于复杂或者逻辑复杂可以绑定一个计算属性
4.需要多个class 可以使用数组语法
5.使用三元表达式切换
6.数组语法也可以切换
具体实现都在下方代码当中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 
		<title></title>
		<style type="text/css">
			.backgroundcolor{
				background-color: yellow;
			}
			.red{
				color: red;
			}
			.textDanger{
				text-decoration: line-through;
			}
			.active{
				background: black;
				color: aliceblue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 给v-bind:class 了一个对象目的是为了动态切换class -->
			<h1 :class="{backgroundcolor:has,red:error}">v-bind绑定class</h1>
			<!-- 动态绑定的样式可以和静态样式共存 -->
			<h1 class="backgroundcolor" :class="{red:error}">v-bind绑定class</h1>
			<!-- class的表达式过于复杂或者逻辑复杂可以绑定一个计算属性 -->
			<h2 :class="computedclass">绑定计算属性</h2>
			<!-- 需要多个class 可以使用数组语法 -->
			<h2 :class="[activeCls,errorCls]">使用数组语法</h2>
			<!-- 使用三元表达式切换 -->
			<h2 :class="[has?activeCls:errorCls]">使用数组语法</h2>
			<!--数组语法也可以切换  -->
			<h2 :class="[{active:has},errorCls]">使用数组语法</h2>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					has:false,
					error:true,
					activeCls:"active",
					errorCls:"error",
				},
				computed:{
					computedclass(){
						return{
							active:this.has&&!this.error,
							textDanger:true,
						}
						
					}
				}
			})
		</script>
	</body>
</html>

代码所对应的实现效果。
在这里插入图片描述

事件属性绑定的练习：

本来这个效果图是Day6练习当中的，但是现在要用事件属性绑定的方法，在随便两个技术的后边，显示出HOT。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 
		<title></title>
		<style type="text/css">
			.left{
				width: 200px;
				height: 370px;
				border: solid 1px gray;
				background-color: antiquewhite;
			}
			h2{
				background-color: aqua;
			}
			h3{
				background-color: aqua;
			}
			li{
				list-style: none;
				
				padding: 0;
			}
			.hot{
				background: red;
				color: #fff;
				display: inline-block;
				font-size: 12px;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<div class="left">
				<h2>全部课程</h2>
				<div  v-for="li in productlist">
					<h3>{{li.title}}</h3>
					<ul>
						<li v-for="pp in li.list">{{pp.name}}<span v-if="pp.isHot" :class="{hot:pp.isHot}">HOT</span></li>	
					</ul>
					<hr v-if="!li.last">
				</div>
				
			</div>	
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
				productlist:{
					pc:{
						title:'前端技术',
						list: [
							{
							name:'html+css',
							url:'http://html.com',
						},
						{
							name:'JavaScript',
							url:'http://JavaScript.com',
							isHot:true,
						},
						{
							name:'Vue/React',
							url:'http://Vue.com',
						},
						{
							name:'node.js',
							url:'http://node.com',
						},
						
						]
					},
					app:{
						title:'后端技术',
						last:true,
						list: [
							{
								name:'java',
								url:'http://java.com',
							},
							{
								name:'php',
								url:'http://php.com',
							},
							{
								name:'express',
								url:'http://express.com',
							
							},
							{
								name:'python',
								url:'http://python.com',
								isHot:true,
							},
						]
						},
				}	
				},	
			})
		</script>
	</body>
</html>

注意在li当中首先写v-if使得hot显示出来，并且在下方随机两个课程的数据当中，设置isHot:true，这样就能在相应的课程后面显示出HOT，其次就是样式了。通过:class绑定后再到css当中设置自己喜欢的样式。注意语法。

总结：

在这些事件绑定当中，感觉比较绕，比较难懂，慢慢理解吧，离自己目标越来越近。加油。

屁小屁小屁

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习日记Day8

vue学习日记Day8：对事件属性绑定进行一个更清楚的补充，感觉这个地方比较难，自己进度有点慢，还有一个是对Day6中的复杂遍历，利用绑定实现的一个小练习。绑定事件属性：1.给v-bind:class 了一个对象目的是为了动态切换class2.动态绑定的样式可以和静态样式共存3.class的表达式过于复杂或者逻辑复杂可以绑定一个计算属性4.需要多个class 可以使用数组语法5.使用三元表达式切换6.数组语法也可以切换具体实现都在下方代码当中。<!DOCTYPE html>
复制链接

扫一扫