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="{changeColor:changeC}" v-on:click="changeC=!changeC">
				<span>示例一span>
			div>

Vue.js:动态绑定CSS样式、指令v-if、v-else-if、v-show、v-for_第1张图片

  • 示例2
			<button v-on:click="changeC=!changeC">colorbutton>
			<button v-on:click="changeL=!changeL">lengthbutton>
			<div v-bind:class="compClasses">
				<span>示例二span>
			div>

Vue.js:动态绑定CSS样式、指令v-if、v-else-if、v-show、v-for_第2张图片
Vue指令v-if

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

Vue.js:动态绑定CSS样式、指令v-if、v-else-if、v-show、v-for_第3张图片

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

成功200

Vue.js:动态绑定CSS样式、指令v-if、v-else-if、v-show、v-for_第4张图片

  • v-show
  • 它只是 display:none而已,不想v-if不会出现在文档里
			<p v-show="error">错误404p>
			<p v-show="success">成功200p>

Vue.js:动态绑定CSS样式、指令v-if、v-else-if、v-show、v-for_第5张图片

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

Vue.js:动态绑定CSS样式、指令v-if、v-else-if、v-show、v-for_第6张图片

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

<html>

	<head>
		<meta charset="utf-8" />
		<title>Vue.jstitle>
		<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>示例1h2>
			<div v-bind:class="{changeColor:changeC}" v-on:click="changeC=!changeC">
				<span>示例一span>
			div>
			<h2>示例2h2>
			<button v-on:click="changeC=!changeC">colorbutton>
			<button v-on:click="changeL=!changeL">lengthbutton>
			<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">错误404p>
			<p v-show="success">成功200p>
			<h2>v-for 循环h2>
			<b>names1b>
			<ul>
				<li v-for="name in names1">{{name}}li>
			ul>
			<b>names2b>
			<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>

你可能感兴趣的:(前端,Record-Vue.js)