浅谈 前端的动态绑定属性
目录
- 前言
- 1. 基本知识
- 2. Demo
前言
作为Java开发者，从开发转到全栈，前端好些细节都需要科普，这不就来个动态绑定属性
起因是这个：
<uni-tr> <uni-td align="center" :rowspan="checkTypesCount + 1" colspan="2">检查</uni-td><uni-td align="center" class="color expand-width">检查类型</uni-td><uni-td align="center" class="color expand-width">最近检查</uni-td><uni-td align="center" class="color expand-width" colspan="2">检查内容</uni-td><uni-td align="center" class="color expand-width" colspan="2">备注</uni-td>
</uni-tr>
<uni-tr> <uni-td align="center" rowspan="checkTypesCount + 1" colspan="2">检查</uni-td><uni-td align="center" class="color expand-width">检查类型</uni-td><uni-td align="center" class="color expand-width">最近检查</uni-td><uni-td align="center" class="color expand-width" colspan="2">检查内容</uni-td><uni-td align="center" class="color expand-width" colspan="2">备注</uni-td>
</uni-tr>
后续排查错误，才知道需要多加一个：，会有不一样的效果，对此详细学习并记录了这一方面的知识
1. 基本知识
在Vue.js中，动态绑定属性是一种非常强大的特性，允许将 JavaScript 表达式绑定到 HTML 属性上，并且在表达式的值发生变化时，相应的 HTML 属性也会更新
基本概念：
-
动态属性绑定：Vue.js 使用
v-bind指令来实现动态属性绑定。这个指令可以简写为冒号:
通过v-bind，将一个 Vue 实例的数据绑定到 HTML 属性上，从而实现属性的动态更新 -
Vue 实例中的数据：Vue.js 的核心是 Vue 实例，它包含了应用中的数据、方法和行为
在 Vue 实例中定义各种数据，然后在模板中使用这些数据来实现动态绑定 -
响应式更新：Vue.js 会监测数据的变化，并自动更新与这些数据相关联的视图
因此，修改了 Vue 实例中的数据时，相关的 HTML 属性也会随之更新
作用：
-
实现动态布局：根据应用的状态或数据动态地修改 HTML 元素的属性，从而实现动态的布局效果
-
响应式更新视图：确保视图与数据保持同步，当数据发生变化时，相关的 HTML 属性也会自动更新，使得界面能够随着数据的变化而变化
-
简化模板代码：动态绑定属性可以减少手动更新 DOM 的工作量，使得模板代码更加简洁、可读
2. Demo
一、 动态样式绑定：
<div v-bind:style="{ color: textColor, fontSize: textSize + 'px' }">This text will change dynamically.
</div>
js如下：
new Vue({el: '#app',data: {textColor: 'red',textSize: 16}
});
二、动态类绑定：
<div v-bind:class="{ active: isActive, 'text-danger': hasError }">Dynamic class binding
</div>
js如下：
new Vue({el: '#app',data: {isActive: true,hasError: false}
});
三、动态属性绑定：
<button v-bind:disabled="isButtonDisabled">Click me</button>
js如下：
new Vue({el: '#app',data: {isButtonDisabled: false}
});