详细分析前端的动态绑定（附Demo）

码农研究僧

已于 2024-04-18 22:03:16 修改

阅读量412

点赞数 4

分类专栏：前端/小程序文章标签：前端 Vue 动态绑定属性

于 2024-03-13 22:59:24 首次发布

本文链接：https://blog.csdn.net/weixin_47872288/article/details/136694087

版权

前端/小程序专栏收录该内容

59 篇文章 4 订阅

订阅专栏

前言

作为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. Demo1

一、动态样式绑定：

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

3. 实操

动态绑定class和style属性是非常常见的需求

3.1动态绑定class属性

在Vue中，可以使用对象语法、数组语法或者绑定到计算属性的方式来动态绑定class属性

Vue会监视数据模型中与class绑定相关的属性，当这些属性发生变化时，Vue会重新计算并更新DOM元素的class属性，实现动态绑定

Demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Class Binding in Vue</title>
    <style>
        .red-text {
            color: red;
        }
        .bold-text {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="app">
        <p :class="{ 'red-text': isRed, 'bold-text': isBold }">Dynamic Class Binding</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isRed: true,
                isBold: false
            }
        });
    </script>
</body>
</html>

在上面的示例中，<p>元素的class属性通过对象语法动态绑定，根据isRed和isBold的值来决定是否应用对应的类名
当isRed为true时，应用.red-text类；
当isBold为true时，应用.bold-text类

3.2 动态绑定style属性

在Vue中，可以使用对象语法或者数组语法来动态绑定style属性

Vue会监视数据模型中与style绑定相关的属性，当这些属性发生变化时，Vue会重新计算并更新DOM元素的style属性，实现动态绑定

Demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Style Binding in Vue</title>
</head>
<body>
    <div id="app">
        <p :style="{ color: textColor, fontSize: fontSize + 'px', fontWeight: isBold ? 'bold' : 'normal' }">Dynamic Style Binding</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                textColor: 'blue',
                fontSize: 16,
                isBold: false
            }
        });
    </script>
</body>
</html>