动态改变html属性的神奇符号":"
0 前言
我们前面学习了如何让页面参数随着变量的变化而变化，那我们肯定不满足于只是让参数变化。
作为前端开发，我们肯定是要页面整体样式能随着参数的变化而变化，这样的话，就能实现更多炫酷效果联动，那我们来学习一下新的符号——”:”。
1 语法
在 Vue 3 中，冒号 : 通常用作 v-bind 的简写。在 Vue 中，v-bind 用于动态地绑定 HTML 属性。
例如，在模板中使用 :class，:style 或者其他 HTML 属性，冒号 : 表示绑定的属性是动态的，它后面跟着一个表达式，这个表达式的结果将被动态地应用到相应的 HTML 属性上。举例来说：
:class="{ active: isActive }"：将动态地把active类应用到元素上，取决于isActive变量的值。:style="{ color: textColor }"：动态地改变元素的文本颜色，取决于textColor变量的值。
在 Vue 3 的模板中，使用冒号 : 可以更简洁地进行属性绑定，因为它省略了 v-bind 的书写，使得模板更加清晰易读。
这样说来可能还是有点官方抽象，我们这里直接上示例。
2 style示例——单属性
<template>
<div
:style="{ backgroundColor: bgColor }"
@click="changeStyle"
>
Click me to change style
</div>
</template>
<script setup>
import { ref } from 'vue';
// 使用 ref 创建两个响应式数据
const bgColor = ref('white'); // 用于控制背景颜色
const count = ref(0); // 用于记录点击次数
// 定义点击事件的处理函数
const changeStyle = () => {
count.value++; // 每次点击增加计数
// 切换背景颜色，根据点击次数的奇偶性决定
bgColor.value = count.value % 2 ? 'black' : 'white';
};
</script>这份代码实现了一个点击元素后动态改变背景颜色的效果。每次点击切换一次背景颜色，奇数次点击为黑色，偶数次点击为白色。
效果如下，
我们看一下里面的关键语句，
:style="{ backgroundColor: bgColor }"是不是有点陌生又熟悉，我们看一下以前我们怎么写
<div style="backgroudColor:white"></div>以前我们是不是都这样赋值backgroudColor颜色的，然后如果要改变颜色就是要调用原生js去改变这个div的颜色属性。
但是我们现在通过符号——”:”，声明style为动态的，同时通过”{属性:变量}”实现对style里面每个属性的操作。
而且我们不仅仅可以单个属性动态变化，还可以多个属性变换，我们看下一个例子。
3 style示例——多属性
<template>
<div
:style="{ backgroundColor: bgColor, color: fontColor, fontSize: fontSize + 'px' }"
@click="changeStyle"
>
Click me to change style
</div>
</template>
<script setup>
import { ref } from 'vue';
const bgColor = ref('white');
const fontColor = ref('black');
const fontSize = ref(16);
const changeStyle = () => {
bgColor.value = bgColor.value === 'white' ? 'blue' : 'white';
fontColor.value = fontColor.value === 'black' ? 'white' : 'black';
fontSize.value = fontSize.value === 16 ? 24 : 16;
};
</script>
<style>
div {
width: 200px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
</style>上面的示例实现了点击元素后同时动态改变背景色、字体颜色和字体大小的效果。每次点击都会切换这三个样式值，从而改变元素的外观。
就效果如下,
代码很多，但是我们只要看其中一句就行，
:style="{ backgroundColor: bgColor, color: fontColor, fontSize: fontSize + 'px' }"我们可以看到，通过”:”号是style变为动态属性，然后通过”{属性1:变量1,属性2:变量2,属性3:变量3}”等方式，实现了对style里面多个属性的动态变化。
这个联动是不是很炫酷！
但是我们做开发，不可能用style来写样式啊，一般都用class来写样式，那class有办法变化吗？
4 class示例——单类名
废话不多说，我们直接上示例，
<template>
<div
:class="{ blackBackground: isBlack }"
@click="changeStyle"
>
Click me to change style
</div>
</template>
<script setup>
import { ref } from 'vue';
const isBlack = ref(false); // 用于控制是否为黑色背景
const changeStyle = () => {
isBlack.value = !isBlack.value; // 切换 isBlack 的值，以切换背景颜色的类
};
</script>
<style>
.blackBackground {
background-color: black;
/* 其他样式 */
}
</style>效果如下，
我们话不多说，我们看关键的一句
:class="{ blackBackground: isBlack }"首先是有我们熟悉的老朋友——”:”，通过冒号声明class为动态变量，然后就是我们后面的数值，
“{blackBackground:isBlack}”，blackBackground是类名，而后面isBlack是变量，我们可以在代码里面看到取值是true或false。
所以这句代码，在isBlack为true时，它等同于
class="blackBackground"所以可以看到会变为blackBackground类所声明的样式，
当isBlack为false的时候，它等同于
class=""所以它不同与style的是，它通过”{类名:变量}”决定是否显示对应的类。
而且它还可以同时控制多个类名，示例如下。
5 class示例——多类名
<template>
<div
:class="{ blackBackground: isBlue,fontSizeBig:isBig }"
@click="changeStyle"
>
Click me to change style
</div>
</template>
<script setup>
import { ref } from 'vue';
const isBlue = ref(false); // 用于控制是否为黑色背景
const isBig = ref(false); // 用于控制是否变为大字体
const changeStyle = () => {
isBlue.value = !isBlue.value; // 切换 isBlack 的值，以切换背景颜色的类
isBig.value = !isBig.value; // 切换 isBig 的值，以切换字体大小的类
};
</script>
<style>
.blackBackground {
background-color: blue;
}
.fontSizeBig{
font-size: 30px;
}
</style>
我们看关键语句,
:class="{ blackBackground: isBlue,fontSizeBig:isBig }"当isBlue和isBig为true的时候，等价于
class="blackBackground fontSizeBig"所以就同时实现了两个类对应的样式。
6 结语
其实vue3冒号的作用不仅仅能让样式style和class变为动态，还有其他地方也能用，比如input的value属性也可以通过如下方式实现变化，
<input :value="text"/>其它的作用，各位小伙伴可以自己探索一下。
接下来，我们讲一下，我们示例一直用，但是没有讲的另一个重要符号@。
让我们来看看，这个调用方法神奇符号，到底什么个事！
