动态绑定属性

article/2025/9/22 16:39:55

（四）动态绑定属性

4.1 v-bind的基本使用

​ 某些时候我们并不想将变量放在标签内容中，像这样<h2>{{message}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:src="imgURL" alt="">，而且这里也不能使用Mustache语法，类似<img v-bind:src="{{imgURL}}" alt="">，这也是错误的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-bind的基本使用</title>
</head>
<body><div id="app"><!-- 错误的做法这里不能使用Mustache语法 --><!-- <img v-bind:src="{{imgURL}}" alt=""> --><!-- 正确的做法使用v-bind指令 --><img v-bind:src="imgURL" alt=""><a v-bind:href="aHerf"></a><!-- 语法糖写法 --><img :src="imgURL" alt=""><a :href="aHerf"></a></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{message:"你好啊",imgURL:"https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1",aHerf:"http://www.baidu.com"}})</script>
</body>
</html>

​ 此时vue对象中定义的imgURL变量和aHerf变量可以动态的绑定到img标签的src属性和a标签的href属性。v-bind:由于用的很多，vue对他有一个语法糖的优化写法也就是:，此时修改imgURL变量图片叶重新加载。

在这里插入图片描述

4.2 v-bind动态绑定class(对象语法)

​ 有时候我们期望对Dom元素的节点的class进行动态绑定，选择此Dom是否有指定class属性。例如，给h2标签加上class="active"，当Dom元素有次class时候，变红<style>.active{color:red;}</style>，在写一个按钮绑定事件，点击变黑色，再次点击变红色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-bind动态绑定class(对象语法)</title><style>.active{color:red;}</style>
</head>
<body><div id="app"><!-- <h2 class="active">{{message}}</h2><h2 :class="active">{{message}}</h2> --><!-- 动态绑定class对象用法  --><!-- <h2 :class="{key1:value1,key2:value2}">{{message}}</h2><h2 :class="{类名1:true,类名2:boolean}">{{message}}</h2> --><h2 class="title" :class="{active:isActive}">{{message}}</h2><h2 class="title" :class="getClasses()">{{message}}</h2><button @click="change">点击变色</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{message:"你好啊",active:"active",isActive:true},methods: {change(){this.isActive = !this.isActive},getClasses(){return {active:this.isActive}}},})</script>
</body>
</html>

​ 定义两个变量active和isActive，在Dom元素中使用:class={active:isActive}，此时绑定的class='active'，isActive为true，active显示，定义方法change()绑定在按钮上，点击按钮this.isActive = !this.isActive，控制Dom元素是否有class='active'的属性。

4.3 v-bind动态绑定class(数组用法)

​ class属性中可以放数组，会依次解析成对应的class。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-bind动态绑定class(数组用法)</title><style></style>
</head>
<body><div id="app"><!-- 加上单引号当成字符串 --><h2 class="title" :class="['active','line']">{{message}}</h2><!-- 不加会被当成变量 --><h2 class="title" :class="[active,line]">{{message}}</h2><h2 class="title" :class="getClasses()">{{message}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{message:"你好啊",active:"aaaa",line:'bbbb'},methods: {getClasses(){return [this.active,this.line]}},})</script>
</body>
</html>

  1. ​ 加上单引号的表示字符串

  2. ​ 不加的会当成变量

  3. ​ 可以直接使用方法返回数组对象

在这里插入图片描述

4.4 v-for和v-bind结合

​ 使用v-for和v-bind实现一个小demo，将电影列表展示，并点击某一个电影列表时候，将此电影列表变成红色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>作业(v-for和v-bind的结合)</title><style>.active{color:red;}</style>
</head>
<body><div id="app"><ul><li v-for="(item, index) in movies" :key="index" :class="{active:index===currentIndex}" @click="changeColor(index)" >{{index+"---"+item}}</li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{currentIndex:0,movies:["海王","海贼王","火影忍者","复仇者联盟"]},methods: {changeColor(index){this.currentIndex = index}},})</script>
</body>
</html>

​ v-for时候的index索引，给每行绑定事件点击事件，点击当行是获取此行索引index并赋值给currentIndex，使用v-bind:绑定class，当index===currentIndexDom元素有active的class，颜色变红。

在这里插入图片描述

4.5 v-bind动态绑定style

4.5.1 v-bind动态绑定style(对象语法)

    <!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> --><!-- 加单引号，当成字符串解析 --><h2 :style="{fontSize:'50px'}">{{message}}</h2><!-- 不加单引号，变量解析 --><h2 :style="{fontSize:fontSize}">{{message}}</h2><h2 :style="getStyle()">{{message}}</h2>

4.5.2 v-bind动态绑定style(数组语法)

  <div id="app"><h2 :style="[baseStyle]">{{message}}</h2><h2 :style="getStyle()">{{message}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{message:"你好啊",baseStyle:{backgroundColor:'red'}},methods: {getStyle(){return [this.baseStyle]}},})</script>

​ 类似绑定class，绑定style也是一样的。


http://chatgpt.dhexx.cn/article/DPxm8x1q.shtml

相关文章

C++ 动态绑定

C++ 动态绑定

定义 动态绑定是在运行期间发生的绑定&#xff0c;发生动态绑定的函数的运行版本由传入的实际参数类型决定&#xff0c;在运行时觉得函数的版本&#xff0c;所以动态绑定又称运行时绑定&#xff0c;动态绑定是C的多态实现的一种形式。 在C中&#xff0c;当使用基类的引用或指…
阅读更多...
动态绑定配置

动态绑定配置

# 一、如何实现动态配置 在Spring体系下,如果实现了ConfigurationProperties则会自动刷新。而如果只使用Value的方法,要加上 RefreshScope 才能实现。 本篇文章我们来分别研究下他们的原理。然后在来看看其他的方案是如何做的吧。 # 二、实现原理 # 2.1 ConfigurationPropertie…
阅读更多...
Java的静态绑定与动态绑定

Java的静态绑定与动态绑定

我们可以对思考一个问题&#xff1a; JVM是如何知道调用的是哪个类的方法源代码&#xff1f; 这里面到底有什么内幕呢&#xff1f; 这篇文章我们就将揭露JVM方法调用的静态(static binding) 和动态绑定机制(auto binding) 。 理解这两个绑定之前&#xff0c;我们不妨先理解一…
阅读更多...
v-bind动态绑定

v-bind动态绑定

目录 一、 v-bind的基本使用 1. v-bind的基本使用 2. Class 与 Style 绑定 二、 v-bind动态绑定class 1. v-bind动态绑定class(对象语法) 2. v-bind动态绑定class(数组用法) 三、 v-for和v-bind结合 四、v-bind动态绑定style 1. v-bind动态绑定style(对象语法) 2. v…
阅读更多...
Vue中动态绑定

Vue中动态绑定

目录 1. v-bind动态绑定class 1.1. v-bind动态绑定class(对象语法) 1.2. v-bind动态绑定class(数组用法) 2. v-for和v-bind结合 3. v-bind动态绑定style 3.1 v-bind动态绑定style(对象语法) 3.2 v-bind动态绑定style(数组语法) 1. v-bind动态绑定class 1.1. v-bind动态绑…
阅读更多...
静态绑定与动态绑定

静态绑定与动态绑定

研究问题&#xff1a; https://www.cnblogs.com/ygj0930/p/6554103.html 要点&#xff1a; 一&#xff1a;绑定 　　把一个方法与其所在的类/对象 关联起来叫做方法的绑定。绑定分为静态绑定&#xff08;前期绑定&#xff09;和动态绑定&#xff08;后期绑定&#xff09;。 …
阅读更多...
动态绑定

动态绑定

文章目录 动态绑定发生的条件在构造方法中调用重写的方法(一个坑) 动态绑定 动态绑定也叫运行时绑定&#xff0c;通俗的讲, 在Java中, 调用某 个类的方法,究竟执行了哪段代码(是父类方法的代码还 是子类方法的代码) , 要看究竟这个引用指向的是父类对 象还是子类对象. 这个过程…
阅读更多...
动态绑定，多态（带你从本质了解多态）

动态绑定，多态（带你从本质了解多态）

在上一章节中&#xff0c;我们讲述了虚函数和虚函数表&#xff0c;我们知道了不管在类中有多少个虚函数&#xff0c;都不会使类的大小扩大&#xff0c;在this指针中&#xff0c;只会多出一个虚函数表的地址&#xff0c;是this指针的第一个内容&#xff0c;在虚函数表中&#xf…
阅读更多...
数据结构——哈希表（Hash表）、哈希碰撞

数据结构——哈希表（Hash表）、哈希碰撞

1.概述 哈希表&#xff08;也叫散列表&#xff09;&#xff0c;是根据键&#xff08;Key&#xff09;直接访问在内存存储位置的数据结构。就是一种以 键-值(key-value) 存储数据的结构&#xff0c;我们只要输入key&#xff0c;就可查找到其对应的值。 hash函数就是根据key计算…
阅读更多...
24-哈希碰撞攻击是什么？

24-哈希碰撞攻击是什么？

24-哈希碰撞攻击是什么&#xff1f; 最近哈希表碰撞攻击&#xff08;Hashtable collisions as DOS attack&#xff09;的话题不断被提起&#xff0c;各种语言纷纷中招。本文结合PHP内核源码&#xff0c;聊一聊这种攻击的原理及实现。 哈希表碰撞攻击的基本原理 哈希表是一种…
阅读更多...
hashcode及哈希碰撞

hashcode及哈希碰撞

数据结构中&#xff1a; 用来映射元素关键字(能唯一标识该元素&#xff0c;类似数据库中的主键可以唯一标识一条记录)和元素的内存地址的关系(解决树&#xff0c;线程表等结构中元素和位置无确定关系&#xff0c;查找时需要进行不断比较的问题。顺序查找的比较结果是和不等。树…
阅读更多...
hash和hash碰撞以及解决方案

hash和hash碰撞以及解决方案

hash&#xff1a; Hash&#xff0c;一般翻译做“散列”&#xff0c;也有直接音译为“哈希”的&#xff0c;就是把任意长度的输入&#xff08;又叫做预映射&#xff0c; pre-image&#xff09;&#xff0c;通过散列算法&#xff0c;变换成固定长度的输出&#xff0c;该输出就是…
阅读更多...
哈希碰撞攻击与防范机制

哈希碰撞攻击与防范机制

1.引子 哈希表的原理是用数组来保存键值对&#xff0c;键值对存放的位置&#xff08;下标&#xff09;由键的哈希值决定&#xff0c;键的哈希值可以在参数时间内计算出来&#xff0c;这样哈希表插入、查找和删除的时间复杂度为O(1)&#xff0c;但是这是理想的情况下&#xff0…
阅读更多...
HashMap的实现原理及hash冲突(碰撞)解决方法

HashMap的实现原理及hash冲突(碰撞)解决方法

HashMap 采用一种所谓的“Hash 算法”来决定每个元素的存储位置。当程序执行 map.put(String,Obect)方法 时&#xff0c;系统将调用String的 hashCode() 方法得到其 hashCode 值——每个 Java 对象都有 hashCode() 方法&#xff0c;都可通过该方法获得它的 hashCode 值。得到这…
阅读更多...
解决Hash碰撞冲突方法总结

解决Hash碰撞冲突方法总结

Hash碰撞冲突 我们知道&#xff0c;对象Hash的前提是实现equals()和hashCode()两个方法&#xff0c;那么HashCode()的作用就是保证对象返回唯一hash值&#xff0c;但当两个对象计算值一样时&#xff0c;这就发生了碰撞冲突。如下将介绍如何处理冲突&#xff0c;当然其前提是一…
阅读更多...
哈希表碰撞攻击的基本原理

哈希表碰撞攻击的基本原理

原文地址&#xff1a;http://blog.jobbole.com/11516/ 来源&#xff1a;张洋 最近哈希表碰撞攻击&#xff08;Hashtable collisions as DOS attack&#xff09;的话题不断被提起&#xff0c;各种语言纷纷中招。本文结合PHP内核源码&#xff0c;聊一聊这种攻击的原理及实现。 …
阅读更多...
hash碰撞处理方法

hash碰撞处理方法

目录 哈希表 哈希冲突 解决碰撞方法 1、开放定址法 a)、线性探测法 a)、二次探测法 c&#xff09;伪随机探测 2、再哈希法 3、拉链法 4、建立公共溢出区 哈希表 是一种实现关联数组抽象数据类型的数据结构&#xff0c;这种结构可以将关键码映射到给定值。 简单来说…
阅读更多...
通俗讲解哈希表，哈希碰撞问题！

通俗讲解哈希表，哈希碰撞问题！

哈希表是个啥&#xff1f; 小白&#xff1a; 庆哥&#xff0c;什么是哈希表&#xff1f;这个哈希好熟悉&#xff0c;记得好像有HashMap和HashTable之类的吧&#xff0c;这是一样的嘛&#xff1f;&#x1f60a; 庆哥&#xff1a; 这个哈希确实经常见&#x1f602;&#xff0c;足…
阅读更多...
哈希碰撞是个什么鬼？

哈希碰撞是个什么鬼？

什么是哈希算法&#xff1f; 哈希算法&#xff0c;也叫哈希函数&#xff0c;散列函数&#xff0c;是将任意长度的二进制值映射为较短的固定长度的二进制值&#xff0c;即哈希值。哈希算法是一种只能加密&#xff0c;不能解密的特殊算法。 什么是哈希碰撞&#xff1f; 如果不…
阅读更多...
哈希值与哈希碰撞

哈希值与哈希碰撞

哈希碰撞 一、什么是哈希&#xff1f; 哈希&#xff08;hash&#xff09;就是讲不同的输入&#xff0c;映射成独一无二、固定长度的值&#xff0c;既哈希值。 我们可以理解为商品的条形码。任何商品都会有一个固定长度而又固定的条码。它的作用就类似于哈希。 哈希值长度可…
阅读更多...
推荐文章

Copyright @ 2022~2023