为什么 Vue3.js / Element+ 组件属性前面有的需要添加冒号,有的不需要?

2022/3/7 23:18:25

本文主要是介绍为什么 Vue3.js / Element+ 组件属性前面有的需要添加冒号,有的不需要?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

背景

使用 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


这篇关于为什么 Vue3.js / Element+ 组件属性前面有的需要添加冒号,有的不需要?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程