VueJS：以冒号为前缀的 html 属性表示啥？

Posted 2023-02-22

【中文标题】VueJS：以冒号为前缀的 html 属性表示啥？

【英文标题】：VueJS: what does an html attribute prefixed with a colon signify?VueJS：以冒号为前缀的 html 属性表示什么？

【发布时间】：2017-12-10 20:40:57

【问题描述】：

例子：

<vue-select 
  class="vue-select1" 
  name="select1"
  :options="options1" 
  :model.sync="result1"
></vue-select>

这里:options和:model.sync前面的冒号是什么意思？我在整个互联网上搜索过，但在任何地方都找不到答案。

此处的示例：https://github.com/Haixing-Hu/vue-select

【问题讨论】：

这允许您使用变量、计算等（当然来自您的组件）作为属性值而不是静态值。

【参考方案1】：

在 Vue 模板中，冒号 : 前缀为 html 属性是 shorthand for v-bind。

Here's the full documentation for v-bind.

【讨论】：

我不熟悉任何其他使用这种语法的前端框架。 React 和 Angular 绝对不会。

React 等价物是用花括号替换属性值周围的引号，在 Vue 中你会使用 :options="options1"，但 React 会使用 options=options1。

【参考方案2】：

在HTML 中使用冒号时要小心，因为选择CSS 和JQuery 中的属性与冒号的含义不同。在CSS和JQuery中，冒号表示pseudo-selector，与v-bind不同；

【参考方案3】：

添加到thanksd's answer：

那些是dynamic attributes。基本上这意味着 Vue.js 会让你将这些属性的值设置为变量，当这些变量的值更新时，这些属性的值也会更新。