背景

使用 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 官网相关文档又看了一遍：

• Attribute
• 使用 JavaScript 表达式

重点：

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

表达式示例：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

疑问：

number + 1 是一个表达式，属于属性绑定；
number 是一个变量，属于属性绑定；
1 是什么？它只是一个整数字面量，也属于属性绑定？

带着疑问百度搜索相关问题，直到看到某个同学的文章：

加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量！

为什么vue组件的属性，有的需要加冒号“:”，有的不用?

解释说明：

• 加冒号的
  属性名称前面使用 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+ 的世界里：

• 属性名称前面没加冒号的
  属性值部分按普通字符串处理
• 属性名称前面加冒号的
  属性值部分按属性绑定处理，属性值可能是以下三种类型：
  1. 变量名称
  2. 单个表达式
  3. 单个整数、布尔、字符串或其它数据类型的字面值

属性绑定时，如果属性值是一个字符串，Vue3.js 会优先判断是否存在名称为该字符串的变量名：

• 如果存在，按变更名称处理
• 如果不存在，按字符串字面值处理

@萌猫他爸，互联网从业者/大数据架构师/全栈开发者

• Blog
• Github @leaderman
• 微博 @萌猫他爸（知乎/小红书/…）
• 公众号 @渊深海阔
• 微信号 @meetuagent