day06---Vue JS-属性绑定+ 分支结构+form表单数据绑定及修饰符+计算属性+ 数组操作

最新推荐文章于 2022-10-18 13:20:36 发布

奈斯。-

最新推荐文章于 2022-10-18 13:20:36 发布

阅读量274

点赞数

分类专栏：第三阶段文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_58678891/article/details/119187918

版权

1. 属性绑定-1.href中的属性动态赋值语法:v-bind:href="Vue中的属性简化写法 :href=“url” <body> <div id="app"> 语法:v-bind:href="Vue中的属性"--> <a v-bind:href="url">baidu</a>  <a :href="url">百度</a>

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

1. 属性绑定

-1.href中的属性动态赋值

语法:v-bind:href="Vue中的属性
简化写法 :href=“url”

	<body>
		<div id="app">
			语法:v-bind:href="Vue中的属性"-->
			<a v-bind:href="url">baidu</a>
			<!-- 简化写法  :href="url" -->
			<a :href="url">百度</a>
	</div>
		<!--  -->
		<script src = "../js/vue.js"></script>
		
		<script>
			const APP = new Vue({
   
				el: "#app",
				data: {
   
					//key:value
					url: "http://www.baidu.com",
				}
			})
		</script>
		
	</body>

-2.class类型绑定

class中可以定义多个样式
需求:需要动态的为class赋值,
规则: :class是属性的绑定,绑定之后查找对应的属性
colorClass: “blue” 之后根据value值 blue 查找对应的CSS样式

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.red{
   
				background-color: red;
				width: 90px;
				height: 23px;
			}
			.blue{
   
				background-color: blue;
				width: 90px;
				height: 23px;
			}
		</style>
	</head>
	<body>
		<div id="app">
		<div :class="colorClass">红色class</div>
	</div>
		<!--  -->
		<script src = "../js/vue.js"></script>
		
		<script>
			const APP = new Vue({
   
				el: "#app",
				data: {
   
					//key:value
					url: "http://www.baidu.com",
					colorClass: "red",
				}
			})
		</script>
		
	</body>

-3.class 属性切换

-需求:通过按钮控制样式展现
-语法:class={class类型的名称: false/true}
默认为true展现,若为false关闭展现

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.red{
   
				background-color: red;
				width: 90px;
				height: 23px;
			}
			.blue{
   
				background-color: blue;
				width: 90px;
				height: 23px;
			}
		</style>
	</head>
	<body>
		<div id="app">
		    <div :class="{red: flag}">红色切换 </div>
			<button  @click="flag=!flag">切换</button> </div>
		<!--  -->
		<script src = "../js/vue.js"></script>
		<script>
			const APP = new Vue({
   
				el: "#app",
				data: {
   
					//key:value
					url: "http://www.baidu.com",
					colorClass: "red",
					flag: true
				}
			})
		</script>
		
	</body>

2. 分支结构语法

分支结构
语法:
1.v-if 如果为真则展现标签
2.v-else-if 必须与v-if连用
3.v-else 必须与v-if连用取反

案例:
要求: 按照用户的考试成绩评级
>=90分优秀
>=80分良好
>=70分中等
>=60分及格
否则不及格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 分支结构
			 语法:
				1.v-if  如果为真则展现数据
				2.v-else-if 必须与v-if连用
				3.v-else   必须与v-if连用
				需求:成绩评定
					优秀/良好/中等/及格/不及格
			 -->
			<h3>评级</h3>
			请录入分数: <input type="number" v-model=

最低0.47元/天解锁文章

奈斯。-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
day06---Vue JS-属性绑定+ 分支结构+form表单数据绑定及修饰符+计算属性+ 数组操作

1. 属性绑定-1.href中的属性动态赋值语法:v-bind:href="Vue中的属性简化写法 :href=“url” <body> <div id="app"> 语法:v-bind:href="Vue中的属性"--> <a v-bind:href="url">baidu</a>  <a :href="url">百度</a>
复制链接

扫一扫