Vue全流程--Vue2中CSS的使用方式

本文链接：https://blog.csdn.net/2301_77136716/article/details/145264656

前言：

我们知道写好的html文件需要CSS进行装饰。在不使用任何框架的情况下

我们有两种使用CSS样式的方法：

1、内嵌式：直接写在需要进行装饰的标签中写入style标签

2、外联式：写在head头部style标签中，结合选择器进行使用

下面讲解的就是Vue中样式的使用技巧

Vue2绑定样式

理论

1. 外联式

写法:class="xxx" xxx可以是字符串、对象、数组。

字符串写法适用于：类名不确定，要动态获取。

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. 内嵌式

:style="{fontSize: xxx}"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象。

实操

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定样式</title>
		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.a1{
				background-color: yellowgreen;
			}
			.a2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.a3{
				border-radius: 20px;
			}
		</style>
		<script type="text/javascript" src="vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" v-bind:class="mood" @click="changeMood">{
  
  {name}}</div> <br/><br/>

			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic" v-bind:class="classArr">{
  
  {name}}</div> <br/><br/>

			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div class="basic" v-bind:class="classObj">{
  
  {name}}</div> <br/><br/>

			<!-- 绑定style样式--对象写法 -->
			<div class="basic" v-bind:style="styleObj">{
  
  {name}}</div> <br/><br/>
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" v-bind:style="styleArr">{
  
  {name}}</div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const app = new Vue({
			el:'#root',
			data:{
				name:'小王',
				mood:'normal',
				classArr:['a1','a2','a3'],
				classObj:{
					a1:false,
					a2:false,
				},
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			methods: {
				changeMood(){
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},
		})
	</script>
	
</html>

绑定class样式就是外联式。通过使用字符串写法可以动态的修改样式的类名

绑定style样式就是内嵌式。通过对象写法和数组写法也可以实现装饰效果

无论是哪种方式都需要通过V-bind解析一下

条件渲染

理论

条件渲染：

1.v-if

写法：

(1).v-if="表达式"

(2).v-else-if="表达式"

(3).v-else="表达式"

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show

写法：v-show="表达式"

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉（display设置为none）

实操

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染</title>
		<script type="text/javascript" src="vue.js"></script>
	</head>
	<body>
		
		<div id="root">
			<h2>当前的n值是:{
  
  {n}}</h2>
			<button @click="n++">点我n+1</button>
			<!-- v-if与template的配合使用 -->
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>1</h2>
				<h2>2</h2>
			</template>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const app = new Vue({
			el:'#root',
			data:{
				name:'小王',
				n:0
			}
		})
	</script>
</html>

满足条件才可以被渲染（出现在浏览器中）

代码解释：

1、首先template没有任何效果，可以把内容包含进去

2、其次如果不使用template改用div等块级元素会破坏原有样式，如果不使用div等块级元素，那么每一行都需要写一句v-if

3、上述v-if需要与template配合使用，这样就可以不用写那么多v-if也可以不破坏样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染</title>
		<script type="text/javascript" src="vue.js"></script>
	</head>
	<body>
		
		<div id="root">
			<!-- 使用v-show做条件渲染 -->
			<h2 v-show="false">欢迎来到{
  
  {name}}</h2>
			<h2 v-show="true">欢迎来到{
  
  {name}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const app = new Vue({
			el:'#root',
			data:{
				name:'小王',
				n:0
			}
		})
	</script>
</html>

有两句话，一句为false,一句是true我们发现只有一句话

都改为true 后我们发现有两句

<h2 v-show="true">欢迎来到{
  
  {name}}</h2>
<h2 v-show="true">欢迎来到{
  
  {name}}</h2>

总结：

以上就是 Vue2中CSS的使用方式以及条件渲染。理解条件渲染有助于后续章节的列表渲染的理解