浅谈 前端的动态绑定属性

前言

作为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}
});