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数据绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决报错ValidationError: Progress Plugin Invalid&
这篇文章主要介绍了解决报错ValidationError: Progress Plugin Invalid Options问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要给大家介绍了关于VUE3引入html文件并传值的相关资料,这是最近在项目中遇到了的一个需求,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要为大家介绍了vue2实现带有阻尼下拉加载的功能示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了Vue2和Vue3的10种组件通信方式梳理，本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式，需要的朋友可以参考一下2022-08-08
Ant Design Vue是使用Vue实现的遵循Ant Design设计规范的高质量UI组件库,用于开发和服务于企业级中后台产品,下面这篇文章主要给大家介绍了关于vue中ant-design-vue组件安装与使用的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue $set 实现给数组集合对象赋值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-07-07
这篇文章主要介绍了vue3+typescript实现图片懒加载插件，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了vue部署后静态文件加载404的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue项目自动设置请求状态的配置方法,本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
在现代社会中,了解血型遗传规律对于优生优育、医疗健康等方面都有重要意义,本文将介绍如何使用Uniapp开发一个跨平台的血型遗传查询工具,帮助用户预测孩子可能的血型,感兴趣的朋友一起看看吧2025-04-04
最新评论