Vue绑定样式

一、引入

1. 网页的组件元素的样式通常由 1. 绑定class，然后通过css文件书写，或者 2. 直接在标签中书写style。

2. 如果我们想要修改样式，无非也是改动他们。在jquery/JavaScript中我们可以通过直接操作DOM元素实现，而在vue中，vue帮我们实现了虚拟DOM的操作，使得我们可以不用去直接操作DOM来实现这个功能。

3. 在vue中我们使用：a)class绑定与、b)style绑定进行实现

   tips : 如果原本就有class属性，那使用:class=xxx时，只会在原来的基础上进行添加，而不会覆盖

二、实现

1. 通过:class='xxx'实现、xxx可以是字符串、数组、对象。

1. 通过字符串实现适用于：只有一个，但是类名不确定，需要动态获取

   <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
   
   new Vue({
   methods: {
   				changeMood(){
   					const arr = ['happy','sad','normal']
   					const index = Math.floor(Math.random()*3)
   					this.mood = arr[index]
   				}
   			},
   })

2. 通过数组实现，适用于：需要绑定多个属性，且数量未知，类名未知。

   			<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
   new Vue({
   data:{
   return{
   classArr:['normal','bad',"good"]
   }
   }
   })

3. 通过对象实现，使用于：要绑定的个数确定(通常情况，但也可以添加)，类名确定，但要动态决定用不用

   <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
   			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>
   
   new Vue({
   data:{
   return{
   classObj:{
   					atguigu1:false,
   					atguigu2:false,
   				},
   }
   }
   
   
   })

2. 通过style实现 :style={xxx},xxx可以是对象、对象数组

1. 通过配置对象

			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
styleObj2:{
					backgroundColor:'orange'
				},

2. 通过数组对线

			<div class="basic" :style="styleArr">{{name}}</div>
styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]

scope属性

组件之间难免会存在相同的类名，或者id名，那怎么解决呢？，vue中为我们提供了一个scope属性，在每个组件的