背景
使用 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 的值也會隨之變化。
敲黑板?。。?/strong> 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，屬性值類型正常，設置有效，因此布局成功。
敲黑板?。。?/strong> 單個整數也是一個表達式。
結論
在 Vue3.js/Element+ 的世界里：
- 屬性名稱前面沒加冒號的
屬性值部分按普通字符串處理 - 屬性名稱前面加冒號的
屬性值部分按屬性綁定處理，屬性值可能是以下三種類型：- 變量名稱
- 單個表達式
- 單個整數、布爾、字符串或其它數據類型的字面值
屬性綁定時，如果屬性值是一個字符串，Vue3.js 會優先判斷是否存在名稱為該字符串的變量名：
- 如果存在，按變更名稱處理
- 如果不存在，按字符串字面值處理
@萌貓他爸，互聯網從業者/大數據架構師/全棧開發者
浙公網安備 33010602011771號