Vue.js：动态绑定CSS样式、指令v-if、v-else-if、v-show、v-for

最新推荐文章于 2024-08-19 08:00:00 发布

勤奋的树懒

最新推荐文章于 2024-08-19 08:00:00 发布

阅读量4.4w

点赞数 2

分类专栏：编程文章标签：绑定css样式 v-if v-show v-for

本文链接：https://blog.csdn.net/qq_42259469/article/details/96136380

版权

编程专栏收录该内容

22 篇文章 0 订阅

订阅专栏

学习Vue.js第五天

动态绑定CSS样式

v-bind:class="{ active: isActive }"
官方文档地址:https://cn.vuejs.org/v2/guide/class-and-style.html

			<!--绑定了changeColor样式,changeC默认为false,单击变非-->
			<div v-bind:class="{changeColor:changeC}" v-on:click="changeC=!changeC">
				<span>示例一</span>
			</div>

在这里插入图片描述

示例2

			<button v-on:click="changeC=!changeC">color</button>
			<button v-on:click="changeL=!changeL">length</button>
			<div v-bind:class="compClasses">
				<span>示例二</span>
			</div>

在这里插入图片描述
Vue指令v-if

v-if

			<button v-on:click="error=!error">错误信息</button>
			<button v-on:click="success=!success">成功信息</button>
			<p v-if="error">错误404</p>
			<p v-if="success">成功200</p>

在这里插入图片描述

v-else-if
如果有错误信息,成功信息是点不出来的,相反可以.

			<p v-else-if="success">成功200</p>

在这里插入图片描述

v-show
它只是 display:none而已,不想v-if不会出现在文档里

			<p v-show="error">错误404</p>
			<p v-show="success">成功200</p>

在这里插入图片描述

v-for

			<b>names1</b>
			<ul>
				<li v-for="name in names1">{{name}}</li>
			</ul>
			<b>names2</b>
			<ul>
				<li v-for="name in names2">姓名:{{name.name}},年龄:{{name.age}}</li>
			</ul>

在这里插入图片描述

div同样可以遍历,但是遍历多次就渲染多少个div
可以用template,直接把div改成template这时候效果一样但不会渲染
全部代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Vue.js</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			span {
				background: hotpink;
				display: inline-block;
				padding: 10px;
				color: #fff;
				margin: 10px 0;
			}
			
			.changeColor span {
				background: green;
			}
			
			.changeLength span:after {
				content: "length+";
				margin-left: 10px;
			}
		</style>
	</head>

	<body>
		<div id="vue-app">
			<h2>示例1</h2>
			<div v-bind:class="{changeColor:changeC}" v-on:click="changeC=!changeC">
				<span>示例一</span>
			</div>
			<h2>示例2</h2>
			<button v-on:click="changeC=!changeC">color</button>
			<button v-on:click="changeL=!changeL">length</button>
			<div v-bind:class="compClasses">
				<span>示例二</span>
			</div>
			<h2>v-if条件</h2>
			<button v-on:click="error=!error">错误信息</button>
			<button v-on:click="success=!success">成功信息</button>
			<p v-show="error">错误404</p>
			<p v-show="success">成功200</p>
			<h2>v-for 循环</h2>
			<b>names1</b>
			<ul>
				<li v-for="name in names1">{{name}}</li>
			</ul>
			<b>names2</b>
			<ul>
				<li v-for="name in names2">姓名:{{name.name}},年龄:{{name.age}}</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: "#vue-app",
			data: {
				changeC: false,
				changeL: false,
				error: false,
				success: false,
				names1: ["old monster", "zhangsan", "lisi", "wangwu"],
				names2: [{
						name: "xiaohong",
						age: 18
					},
					{
						name: "xiaoming",
						age: 22
					},
					{
						name: "laowang",
						age: 44
					}
				]
			},
			methods: {

			},
			computed: {
				compClasses: function() {
					return {
						changeColor: this.changeC,
						changeLength: this.changeL
					};
				}
			}
		});
	</script>

</html>