目录
- 前言
- 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}
});