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

学习Vue.js第五天动态绑定CSS样式v-bind:class="{ active: isActive }"官方文档地址:https://cn.vuejs.org/v2/guide/class-and-style.html<div v-bind:class="{ch...

勤奋的树懒

44870人浏览 · 2019-07-16 15:58:51

勤奋的树懒 · 2019-07-16 15:58:51 发布

学习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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^