标签：冒号 绑定 Element Vue3 js id 属性
背景
使用 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 会优先判断是否存在名称为该字符串的变量名：
- 如果存在，按变更名称处理
- 如果不存在，按字符串字面值处理
@萌猫他爸，互联网从业者/大数据架构师/全栈开发者
标签：冒号,绑定,Element,Vue3,js,id,属性 来源： https://www.cnblogs.com/yurunmiao/p/15977676.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。