Vue之v-bind类名与样式绑定

淩亂°似流年 2023-06-07 12:14 5阅读 0赞

*  **今天的课程分为五个小部分**
 *  （1）v-bind回顾
 *  （2）class-对象语法
 *  （3）class-数组语法
 *  （4）内联样式style-对象语法
 *  （5）内联样式style-计算属性语法

## 前言 ##

*  DOM元素经常动态绑定一些类名或者style样式，本节讲解下使用 v-bind指令绑定class与style的多种方法。
 *  之前介绍过v-bind基本用法及语法糖，**主要用于动态更新HTML** 元素属性，接下来简单回顾下。

# 1.v-bind回顾 #

*  v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]
 *  **语法格式1：单个语法格式**
    
     *  v-bind:attributeName=variable

<div class="app">
    			<a
    				v-bind:class="classFn"
    				v-bind:title="titleFn"
    				v-bind:href="hrefFn"
    				v-bind:target="targetFn"
    			>	
    			{
       {text}}
    			</a>
    </div> 
     <script type="text/javascript">
    		//语法格式1：单个语法格式
    		var app = new Vue({
    			el:'.app',
    			data:{
    				classFn:'aName',
    				titleFn:'百度',
    				hrefFn:'http://www.baidu.com',
    				targetFn:'_blank',
    				text:'百度一下'
    			}
    		})
    	</script>

*  **语法格式2：对象语法格式**
    
     *  v-bind=“\{attributeName1:variable1,attributeName2:variable2,……\}”  
        案例：在页面中利用Vue实例的变量制作一个超级链接

<div class="app">
    			<a v-bind="{class:link.class,title:link.title,href:link.href,target:link.target}">	
    			{
       {link.info}}
    			</a>
    </div>
    <script type="text/javascript">
    		//语法格式2：对象语法格式
    		var app = new Vue({
    			el:'.app',
    			data:{
    				link:{
    					class:'aaa',
    					title:'百度',
    					href:'http://www.baidu.com',
    					target:'_blank',
    					info:'百度'
    				}
    			}
    		})
    </script>

*  **语法格式3：数组语法格式”绑定类名”**
    
     *  v-bind:attributeName=“\[variable1,variable2,……\]”
     *  案例（绑定类名）：

<div class="app">
    			<a v-bind:class='[class1,class2,class3]' :href="hrefFn">{
       {info}}</a>
    </div>
    <script type="text/javascript">
    		var app = new Vue({
    			el: '.app',
    			data: {
    				info: '百度一下',
    				class1: 'a1',
    				class2: 'a2',
    				class3: 'a3',
    				hrefFn: 'http://www.baodu.com'
    			}
    		})
    </script>

# class-对象语法-单类名切换 #

*  **给v-bind:class设置一个对象，可以动态切换class。**
    
     *  语法：传给 v-bind:class 一个对象，以动态地切换 class：

<div  :class="{active:isActive}"
    data: {
    				isActive:false,
    			}

isActive为true时，结果为下图：  
![在这里插入图片描述][20191015084602896.png]  
isActive为false时，结果为下图：  
![在这里插入图片描述][20191015084625247.png]  
**上面案例中，类名active依赖于数据isActive。当其值为true时，div拥有该类名active，为false时则没有**

# class-对象语法-多类名切换 #

*  除了单个类名切换，在对象中也可以传入多个属性来动态切换多个 class。例如：

<div class="demo">
    	<div  :class="{active:isActive,pei:jiajing,zuo:mengjia}"></div>
    </div>
    <script type="text/javascript">
    	var demo = new Vue({
    	el: '.demo',
    	data: {
    				isActive:false,
    				jiajing:true,
    				mengjia:true
    			}
    	})
    </script>

*  **v-bind:class 指令也可以与普通的 class 属性共存，例如**  
    class=app和其他类名共存

<div class="demo">
    	<div class='app'  :class="{active:isActive,pei:jiajing,zuo:mengjia}"></div>
    </div>
    <script type="text/javascript">
    	var demo = new Vue({
    	el: '.demo',
    	data: {
    				isActive:false,
    				jiajing:true,
    				mengjia:true
    			}
    	})
    </script>

**绑定的数据对象不必都定义在模板里，也可以用一个大对象包裹起来，例如：**

<div class="demo">
    	<div :class="classObject"></div>
    </div>
    <script type="text/javascript">
    	var demo = new Vue({
    	el: '.demo',
    	data: {
    				classObject: {
    					jiajai: true,
    					huihui: true,
    					jiaojiao: true
    				}
    			}
    	})
    </script>

**对象包裹形式优点：如果需要添加一个class时，只需要在变量里添加属性，并设置该属性为true即可，所以相对来说更加自由。**

*  点击按钮，虽然原本itsClass这个变量并没有red这个属性，但后续添加这个属性也会在该div里添加red这个class类名。如下图：  
    ![在这里插入图片描述][20191015091753731.png]  
    **当:class的表达式过长或者逻辑复杂时，可以绑定计算属性，这是一种友好且常见的语法。如下图：**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]  
    **当需要应用多个class时，可以使用数组语法，给class绑定一个数组，应用一个class列表，例如。**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]

## class-数组语法-表达式1 ##

*  可以使用**三元/目运算符**来根据条件切换class，例如  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]

## class-数组语法-表达式2 ##

案例2：例如下图：  
首先它是数组，因此第一个g存在，因此有样式名fontGreen；  
其次，是一个三元表达式，会判断r的值，如果为true（或隐式转换为true），那么就绘将r的值添加到数组，否则添加s的值。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]  
**当class为多条件时，三元表达式写法较为繁琐，可以在数组里嵌套对象，使用对象写法，如下。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]

## class-数组语法-数组对象嵌套 ##

**当class为多条件时，三元表达式写法较为繁琐，可以在数组里嵌套对象，使用对象写法，如下。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]

## class-数组语法-计算属性 ##

*  与对象语法一样，当:class的**表达式过长或者逻辑复杂时**，可以绑定**计算属性computed**，这是一种友好且常见的语法。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]
 *  使用计算属性给元素动态设置类名，在业务里经常遇到，尤其在表达式较长或者逻辑复杂时，推荐使用计算属性。

## 内联样式style-对象语法 ##

*  v-bind:style 的对象语法十分直观，看着非常像 CSS，但其实是一个 JS对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：  
    ![在这里插入图片描述][20191015092405514.png]

## 内联样式style-对象包裹语法 ##

*  这样会让模板更加清晰

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]

## 内联样式style-计算属性语法 ##

*  也可以用计算属性用法绑定  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]  
    **以上就是v-bind类名与样式绑定的分析，有问题留言小编，嘿嘿**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230601/94990d2a431d4197abd0f73bd88121f7.png
[20191015084602896.png]: /images/20230601/8cb05b6fd39e4d319c4077d6344764b2.png
[20191015084625247.png]: /images/20230601/637e278dafae4f6281b6a4684d7ab7b9.png
[20191015091753731.png]: /images/20230601/32e5aac3d0344a8e97aa5605729d45d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230601/4e5c0ed2f23744229290bef230c51ab4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230601/c1f68916ea5a485faca7984d88499e78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230601/81ab4afeb2e94723921a482683c9678c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: /images/20230601/cb97df51840047b8b2a23330f32f8c73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: /images/20230601/d49a47f8ff384559a09e030c3107b816.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: /images/20230601/51c483fa089147dab4992ada0f470e0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: /images/20230601/e2434e0901434f02abcae6ad2b75bc49.png
[20191015092405514.png]: /images/20230601/f121f8578ee64928befe35542fac606d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]: /images/20230601/4ed1992c3ed14aaf90f7264550cd49b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]: /images/20230601/db33e8a825ec40fcb221ac407bbad74d.png