背景
使用 Element+ Layout 布局：
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
Element+ Layout 将每一行的宽度平均分成 24 格，使用 span 描述每一列占用的格数，相当于每一列的宽度。
这段代码表示 1 行被拆分为 2 列，每一列占用 12 格，使用 span 属性指定，有一个奇怪的现象：
span 的属性值就是一个整数，不是变量名称，用不到属性绑定，前面为什么会有一个冒号？
去掉这个冒号行不行？ 实际测试，不行！
为什么会注意到这个冒号现象？这里需要提一下 Vue3.js 的重要特性：属性绑定。
Element+ 是基于 Vue3.js 实现的组件库。
<div id="1"></div>
这是一个简单的 div，且指定它的属性 id 值为 1；假设我们需要 动态 地指定它的 id，应该怎么做呢？
Vue3.js 提供的解决方案：可以定义一个变量 dynamicId，用于实际存储 id 值；然后将这个 div 的属性 id 绑定 到变量 dynamicId 上面，这个特性称之为 属性绑定。
<div v-bind:id="dynamicId"></div>
属性 id 使用 属性绑定 时需要使用 v-bind: 进行标识，id 的值为需要绑定的变量名称 dynamicId；这样属性 id 的值就是变量 dynamicId 的值，如果变量 dynamicId 的值发生变化，属性 id 的值也会随之变化。
敲黑板！！！ v-bind: 实际使用时可以简化为 : ，即单独的一个冒号，这就是属性名称前面冒号的由来。
问题
既然使用属性值是一个变量名称时才需要使用 v-bind: 或者 : 进行标识，为什么属性值为整数时，
<el-col :span="12">...</el-col>
v-bind: 或者 : 也必须被设置？
分析
既然问题和 属性绑定 有关，带着问题把 Vue3.js 官网相关文档又看了一遍：
重点：
对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
表达式示例：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
疑问：
number + 1 是一个表达式，属于属性绑定；
number 是一个变量，属于属性绑定；
1 是什么？它只是一个整数字面量，也属于属性绑定？
带着疑问百度搜索相关问题，直到看到某个同学的文章：
加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量！
解释说明：
- 加冒号的
属性名称前面使用 v-bind: 或者 : ，表示属性值部分为变量名或表达式； - 没加冒号的
属性值部分为 字符串字面量。
问题关键：字符串字面量！！！ 也就是说，"1" 表示的是字符串的 1，而不是整数的 1；即字符串 1 并不会被内部转换为整数 1 使用。
这也就解释了为什么去掉冒号，Element+ Layout 布局会失败？
属性 span 要求的值类型是一个整数，如果去掉属性 span 前面的冒号，像这样：
<el-col span="12">...</el-col>
这里的 12 表面看起来是一个整数，实际 Vue3.js/Element+ 是按照字符串处理的，属性值类型异常，设置无效，因此布局失败。
属性 span 前面添加冒号，像这样：
<el-col :span="12">...</el-col>
这里的 12 很明显不是一个变量名，但会按照表达式处理；这个表达式的值为整数值 12，属性值类型正常，设置有效，因此布局成功。
敲黑板！！！ 单个整数也是一个表达式。
结论
在 Vue3.js/Element+ 的世界里：
- 属性名称前面没加冒号的
属性值部分按普通字符串处理 - 属性名称前面加冒号的
属性值部分按属性绑定处理，属性值可能是以下三种类型：- 变量名称
- 单个表达式
- 单个整数、布尔、字符串或其它数据类型的字面值
属性绑定时，如果属性值是一个字符串，Vue3.js 会优先判断是否存在名称为该字符串的变量名：
- 如果存在，按变更名称处理
- 如果不存在，按字符串字面值处理
@萌猫他爸，互联网从业者/大数据架构师/全栈开发者