脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue数据绑定

VUE v-bind 数据绑定的示例详解

 更新时间：2023年05月10日 09:43:08   作者：honeymoose  
这篇文章主要介绍了VUE v-bind 数据绑定,简单点来说就是对 HTML 中的元素，我们可以使用 v-bind 来进行绑定和动态的数据输出，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下

动态的绑定一个或多个 attribute，也可以是组件的 prop。

  • 缩写： : 或者 . (当使用 .prop 修饰符)
  • 期望： any (带参数) | Object (不带参数)
  • 参数： attrOrProp (可选的)
  • 修饰符：
    • .camel ——将短横线命名的 attribute 转变为驼峰式命名。
    • .prop ——强制绑定为 DOM property。3.2+
    • .attr ——强制绑定为 DOM attribute。3.2+

用途

当用于绑定 class 或 style attribute，v-bind 支持额外的值类型如数组或对象。详见下方的指南链接。在处理绑定时，Vue 默认会利用 in 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。

如果存在同名的 property，则 Vue 会把作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用 .prop 和 .attr 修饰符来强制绑定方式。有时这是必要的，特别是在和自定义元素打交道时。

当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。当不带参数使用时，可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。

示例

<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />
<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>
<!-- 缩写 -->
<img :src="imageSrc" />
<!-- 缩写形式的动态 attribute 名 -->
<button :[key]="value"></button>
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定对象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- prop 绑定。“prop” 必须在子组件中已声明。 -->
<MyComponent :prop="someThing" />
<!-- 传递子父组件共有的 prop -->
<MyComponent v-bind="$props" />
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

使用

简单点来说就是对 HTML 中的元素，我们可以使用 v-bind 来进行绑定和动态的数据输出。

一个最简单的使用例子就是下面的我们需要根据我们返回的数据动态绑定一个图片。

<img
   v-bind:src="item.blogCover"
   alt=""
   class="img-thumbnail"
   />

上面的代码，中的 item.blogCover 是我们从 JSON 返回对象中获得的数据，我们可以使用这个内置操作符将上面的图片的链接绑定到图片的 SRC 属性上。

通过上图绑定后，我们就可以完成图片的动态显示了。

到此这篇关于VUE v-bind 数据绑定的文章就介绍到这了,更多相关vue数据绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论