五、vue基础-指令之v-bind

news2025/1/22 9:08:25

一、v-bind

前面要讲的一系列指令，主要是将值插入到模板内容中。

 但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

  • 比如动态绑定a元素的href属性；
  • 比如动态绑定img元素的src属性；

绑定属性我们使用v-bind:

  • 缩写：冒号（:）
  • 预期：any(with argument) | Object(without argument)，可以是任何一个值也可以是一个对象
  • 参数：attrOrProp(optional)
  • 修饰符：.camel - 将 kebab-case-attribute名转换为 camelCase
  • 用法 动态地绑定一个或多个attribute，或一个组件prop到表达式。

（1）案例一：绑定img的src属性

添加下面一行代码之后，imgUrl就会去data里面找，找到之后就会替换掉。动态解析

<img v-bind:src="imgUrl" alt="" />
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 1. 绑定img的src属性 -->
      <img v-bind:src="imgUrl" alt="" />
    </div>
    <script src="../lib/vue.js"></script>

    <script>
      const app = Vue.createApp({
        // data: option api
        data: function () {
          return {
            imgUrl:
              'http://p1.music.126.net/PunczcKM35-KN2-JT0VeTQ==/109951168547324777.jpg',
          };
        },
      });

      app.mount('#app');
    </script>
  </body>
</html>

（2）案例二：绑定a的href属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 1. 绑定img的src属性 -->
      <img v-bind:src="imgUrl" alt="" />

      <!-- 2. 绑定a的href属性 -->
      <a v-bind:href="href">百度一下</a>
    </div>
    <script src="../lib/vue.js"></script>

    <script>
      const app = Vue.createApp({
        // data: option api
        data: function () {
          return {
            imgUrl:
              'http://p1.music.126.net/PunczcKM35-KN2-JT0VeTQ==/109951168547324777.jpg',
            href: 'http://www.badu.com',
          };
        },
      });

      app.mount('#app');
    </script>
  </body>
</html>

 （3）实战：点击按钮切换图片

点击按钮把当前展示的图片切换成另外一张图片。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>
        <button @click="changeImg">切换图片</button>
      </div>

      <!-- 1. 绑定img的src属性 -->
      <img v-bind:src="imgUrl" alt="" />
    </div>
    <script src="../lib/vue.js"></script>

    <script>
      const app = Vue.createApp({
        // data: option api
        data: function () {
          return {
            imgUrl:
              'http://p1.music.126.net/PunczcKM35-KN2-JT0VeTQ==/109951168547324777.jpg',
            href: 'http://www.badu.com',
          };
        },
        methods: {
          changeImg: function () {
            this.imgUrl =
              'http://p1.music.126.net/oL87fivpHSztzsOBJhwqFg==/109951168547311981.jpg';
          },
        },
      });

      app.mount('#app');
    </script>
  </body>
</html>

图片是不是切换成功啦？那如果我们想再次点击切换回原来的图片我们该怎么去做？（根据目前所学到的知识）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>
        <button @click="switchImg">切换图片</button>
      </div>

      <!-- 1. 绑定img的src属性 -->
      <img v-bind:src="showImgUrl" alt="" />
    </div>
    <script src="../lib/vue.js"></script>

    <script>
      const app = Vue.createApp({
        // data: option api
        data: function () {
          return {
            imgUrl1:
              'http://p1.music.126.net/PunczcKM35-KN2-JT0VeTQ==/109951168547324777.jpg',
            imgUrl2:
              'http://p1.music.126.net/oL87fivpHSztzsOBJhwqFg==/109951168547311981.jpg',
            showImgUrl:
              'http://p1.music.126.net/oL87fivpHSztzsOBJhwqFg==/109951168547311981.jpg',
            href: 'http://www.badu.com',
          };
        },
        methods: {
          switchImg: function () {
            this.showImgUrl =
              this.showImgUrl === this.imgUrl1 ? this.imgUrl2 : this.imgUrl1; 
          },
        },
      });

      app.mount('#app');
    </script>
  </body>
</html>

（4）总结

 （5）绑定class介绍（重要）

最基本的绑定：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2 :class="classes">Hello World</h2>
    </div>
    <script src="../lib/vue.js"></script>

    <script>
      const app = Vue.createApp({
        // data: option api
        data: function () {
          return {
            classes: 'abc cba nba',
          };
        },
      });

      app.mount('#app');
    </script>
  </body>
</html>

这时候我们来个需求，下方有个按钮，点击之后变成红色，再点击之后红色变成黑色。

直接上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 1. 基本绑定class-->
      <h2 :class="classes">Hello World</h2>

      <!-- 2.1 对象语法的基本使用  -->
      <button :class="{active: isActive}" @click="btnClick">我是按钮</button>

      <!-- 2.2 对象语法的多个键值对  -->
      <button :class="{active: isActive, kobe:false}" @click="btnClick">我是按钮</button>

      <!-- 2.3 动态绑定class可以写对象语法  -->
      <button :class="{active: isActive}" @click="btnClick">我是按钮</button>

      <!-- 2.3   动态绑定的class是可以和普通的class并列使用的  -->
      <button class="abc cba" :class="{active: isActive}" @click="btnClick">我是按钮</button>
      <h2></h2>
    </div>
    <script src="../lib/vue.js"></script>

    <script>
      const app = Vue.createApp({
        // data: option api
        data: function () {
          return {
            classes: 'abc cba nba',
            isActive: false,
          };
        },
        methods: {
          btnClick: function () {
            this.isActive = !this.isActive;
          },
        },
      });

      app.mount('#app');
    </script>
  </body>
</html>

那大家看现在这个是不是一个对象？我们是不是可以把这整个对象抽取出去？

上面讲述好几种使用场景，目前我们只要知道这一点就好： 

# {active: isActive, kobe:false} 键值对的值必须要是布尔类型，来决定前面的class（key）是否要绑定过来-->
<button :class="{active: isActive, kobe:false}" @click="btnClick">

还有数组语法介绍一下（了解）：  

 点击看下效果：

 

 

 

 

 （6）绑定style介绍

style中的某些值，来自data中，值是动态的，不是写死的。那我们该怎么绑定呢？现在这么做，肯定是没实现效果的。

 我们添加绑定style发现还是不行，该怎么办呢？

 

其实我们可以把他放到对象里面， 之间用逗号来分割。但是有个key是font-size，在js语法里，“-”符号是不会把他当做一个整体来着的。所以我们得给他加个单引号。‘30px’也是的，需要加一个引号。

 

 

如果不这样子写 其实也可以写成驼峰命名，写成驼峰的话也是能够正常的解析的:

 

如果font-size的值也是来自data，如果fontSize写的30，那我们在style里面就得拼接字符串。如果fontSize直接写的'30px'，那就不用去拼接字符串。

 

 

写好之后我们来看下效果。是不是绑定style啦。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 1. 普通的html写法 -->
      <h2 style="color: red; font-size: 30px">哈哈哈哈</h2>

      <!-- 2. style中的某些值，来自data中 -->
      <!-- 2.1 动态绑定style，在后面需要跟上一个对象类型 -->
      <h2 v-bind:style="{ color: fontColor, 'font-size': '30px' }">
        哈哈哈哈2.1
      </h2>

      <!-- 2.2 30px如果也是取自data -->
      <h2 v-bind:style="{ color: fontColor, fontSize: fontSize + 'px'}">
        哈哈哈哈2.2
      </h2>

      <!-- 2.3 动态的绑定属性，这个属性是一个对象 -->
      <h2 v-bind:style="objStyle">哈哈哈哈2.3</h2>

      <!-- 3. style的数组语法 -->
      <h2 :style="[objStyle, { backgroundColor: 'purple' }]">嘿嘿嘿</h2>
    </div>
    <script src="../lib/vue.js"></script>

    <script>
      const app = Vue.createApp({
        // data: option api
        data: function () {
          console.log(this);
          return {
            fontColor: 'blue',
            fontSize: 30,
            objStyle: { color: 'red', 'font-size': '30px' },
          };
        },
      });

      app.mount('#app');

      // const obj = {
      //   'font-size': '30px',
      //   fontSize: '30px',
      // };
    </script>
  </body>
</html>

 

 

（7）动态绑定属性

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- <h2 class="" style="" style=""></h2> -->
      <h2 :[name]="'aaaa'">你好鸭赛丽亚</h2>
    </div>
    <script src="../lib/vue.js"></script>

    <script>
      const app = Vue.createApp({
        // data: option api
        data: function () {
          return {
            name: 'title',
          }
        },
      })

      app.mount('#app')
    </script>
  </body>
</html>

 

（8）绑定一个对象（必须掌握）

我希望把props绑定在h2那个元素上面。

 

希望能实现这种效果，那这种情况我们该怎么去做？

<div id="app">
    <h2 name="why" age="18" height="1.88">Hello World</h2>
</div>

以前我们是咋实现的？挨个去写 

 这样子手写是不是有点太麻烦了。

我们可以这么写， v-bind后面直接跟一个对象，会自动遍历这个对象里面所有的属性，并且添加到这个h2的元素上面。 

 

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/434311.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

智能电网中针对DOS和FDIA的弹性分布式EMA（Matlab代码实现）

智能电网中针对DOS和FDIA的弹性分布式EMA（Matlab代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 ​智能电网是一种典型的信息物理融合系统,也是关系国民经济发展和国家安全的重大关键基础设施,其安全稳定运行至关重要。近年来…
阅读更多...
java某百货店POS积分管理系统_积分点更新生成以及通票回收处理

java某百货店POS积分管理系统_积分点更新生成以及通票回收处理

百货店是生活中不可缺少的一部分&#xff0c;为了给顾客提供更方便的服务平台以及更好的服务质量&#xff0c;而设计了POS积分管理系统。百货店通过点积分的管理获得顾客更好的信誉&#xff0c;增加客户流量&#xff0c;获得更多的利益。在百货店经营的过程中&#xff0c;每天的…
阅读更多...
软考 软件设计师上午题面向对象

软考 软件设计师上午题面向对象

面向过程和面向对象 省略面向对象可以省略过程&#xff0c;复杂事情简单化 类 类是对象的抽象&#xff0c;对象是类的实例 一般类是交通工具。特殊类是轮船飞机。因为他们是特殊的佳通工具&#xff0c;一个天上的一个海上的 对象 属性别名状态成员变量&#xff0c;方法也叫…
阅读更多...
K_A31_002 基于STM32等单片机驱动315MHZ收发模块 串口显示

K_A31_002 基于STM32等单片机驱动315MHZ收发模块 串口显示

K_A31_002 基于STM32等单片机驱动315MHZ收发模块 串口显示 所有资源导航一、资源说明二、基本参数参数引脚说明 三、驱动说明原理&#xff1a;对应程序: 四、部分代码说明1、接线引脚定义1.1、STC89C52RC315MHZ收发模块1.2、STM32F103C8T6315MHZ收发模块 五、基础知识学习与相关…
阅读更多...
通过Salesforce考试 (考证)后，如何在Trailhead上验证和维护证书？

通过Salesforce考试 (考证)后，如何在Trailhead上验证和维护证书？

随着Salesforce产品家族的不断壮大&#xff0c;学习者可以考的认证也在不断增多。从十几年前的几个认证&#xff0c;增长到现在的40多个认证。 在获得Salesforce认证之后&#xff0c;除了要将其放在LinkedIn和Trailblazer.me个人资料中&#xff0c;还有一种官方途径可以让其他…
阅读更多...
靶机精讲之pwnOS1.0解法二

靶机精讲之pwnOS1.0解法二

主机发现 基于前一解法 复现找到的漏洞文件利用文件 应该要想到如何利用ssh 构造利用语句 authorized_keys文件获取 访问免登录文件失败 敏感文件泄露库 发现敏感文件的经验&#xff08;精&#xff09; 按ctrlf搜索 .ssh 免密公钥 已经拿到公钥的数据 用公钥信息破解出私钥…
阅读更多...
Redis入门介绍+linux安装

Redis入门介绍+linux安装

Redis是什么 Redis 是完全开源免费的&#xff0c;遵守BSD协议&#xff0c;是一个高性能(NOSQL)的key-value数据库,Redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value&#xff08;键值对&#xff09;数据库&#xff0c;并提供多种语言的…
阅读更多...
【HTML5】HTML5 多媒体标签 ① ( audio 音频标签 | 音频标签常见属性值设置 | 音频标签默认代码设置 | 音频标签设置多种类型音频文件 )

【HTML5】HTML5 多媒体标签 ① ( audio 音频标签 | 音频标签常见属性值设置 | 音频标签默认代码设置 | 音频标签设置多种类型音频文件 )

文章目录 一、HTML5 多媒体标签二、音频标签三、音频标签代码示例 ( 默认操作 )四、音频标签代码示例 ( 插入 mp3 / ogg 两种格式的音频 ) 一、HTML5 多媒体标签 传统 HTML 开发中 , 如果想要向网页中嵌入音频和视频 , 需要 使用 Flash 浏览器插件才能实现 ; 在 HTML5 中 , 使…
阅读更多...
“智慧金融”精细化客户服务+营销获客

“智慧金融”精细化客户服务+营销获客

在新兴金融产品与智能服务创新科技手段的不断推动下&#xff0c;我国金融行业的发展已经实现由“金融信息化”向“智慧金融”的阶级跨越。金融行业在客户服务、业务流程、业务开拓等方面已得到全方位的“数智化”提升&#xff0c;实现了“AI金融”客户服务、风控、营销获客的智…
阅读更多...
基于禅道二开领导报表

基于禅道二开领导报表

上周开会的时候公司项目总监说感觉最近开发人员很轻松&#xff0c;工作量不饱和。支付力度不够。 做为开发负责人&#xff0c;对项目总监这个说法我肯定需要给予响应&#xff0c;不然老板也在场&#xff0c;后续项目想要加资源啥的都无法解释。 关注我的人知道&#xff0c;之前…
阅读更多...
客流统计分析系统增强售楼处、4S店飞单管理能力

客流统计分析系统增强售楼处、4S店飞单管理能力

客流统计分析系统可以为售楼处和4S店提供有效的飞单管理能力&#xff0c;使其能够更好地管理客户信息和提高销售效率。首先&#xff0c;客流统计分析系统可以对售楼处和4S店的客流进行实时监控和分析。通过使用摄像头、人脸识别等技术&#xff0c;可以对进店的客户进行统计和分…
阅读更多...
whisper技术导读2

whisper技术导读2

1、数据处理 根据最近利用互联网上的网络规模文本来训练机器学习系统的趋势&#xff0c;我们采用了一种极简的方法来进行数据预处理。与语音识别方面的许多工作相比&#xff0c;我们训练Whisper模型在没有任何显著标准化的情况下预测转录本的原始文本&#xff0c;依靠序列到序列…
阅读更多...
ffmpeg 向流媒体服务器推RTSP 流时候的 交互过程以及接收到的 RTP包解析

ffmpeg 向流媒体服务器推RTSP 流时候的 交互过程以及接收到的 RTP包解析

之前写了RTSP服务端 和客户端拉流之间的交互流程 正好最近在看流媒体服务器 中RTSP的部分 copy了下源码 编译下发现不能正常播放 借此机会 记录下rtsp推流时候和服务器交互的流程 以上是推流端向服务器推流的时候 的整个流程 之后就是媒体数据的发送了 然后在看下vlc播…
阅读更多...
electron_笔记

electron_笔记

创建你的第一个应用: package.json: {"name": "my-electron-app","version": "1.0.0","description": "my demo","main": "main.js","scripts": {"dev": "electr…
阅读更多...
Mac安装和卸载node和npm

Mac安装和卸载node和npm

1、官网下载 访问nodejs官网&#xff0c;点击稳定版&#xff0c;并下载 https://nodejs.org/en 2、安装 双击刚下载的文件&#xff0c;按步骤默认安装就行 3、 验证 安装完成后打开终端 npm -vnode -v如下图出现版本信息&#xff0c;说明安装成功 4、环境配置 打开M…
阅读更多...
Vue中的嵌套路由

Vue中的嵌套路由

router官网-嵌套路由 实际生活中的应用界面&#xff0c;通常由多层嵌套的组件组合而成。同样地&#xff0c;URL 中各段动态路径也按某种结构对应嵌套的各层组件&#xff0c;例如&#xff1a; <body><div id"app"><h1>欢迎使用路由导航</h1&g…
阅读更多...
差分信号输入隔离放大转换模块PCB焊接式0-20mV/0-±10mV/0-±20mV转0-5V/0-10V/4-20mA

差分信号输入隔离放大转换模块PCB焊接式0-20mV/0-±10mV/0-±20mV转0-5V/0-10V/4-20mA

概述&#xff1a; IPO压力应变桥信号处理系列隔离放大器是一种将差分输入信号隔离放大、转换成按比例输出的直流信号混合集成厚模电路。产品广泛应用在电力、远程监控、仪器仪表、医疗设备、工业自控等行业。该模块内部嵌入了一个高效微功率的电源&#xff0c;向输入端和输出端…
阅读更多...
【Java版oj】day33剪花布条、客似云来

【Java版oj】day33剪花布条、客似云来

目录 一、剪花布条 &#xff08;1&#xff09;原题再现 &#xff08;2&#xff09;问题分析 &#xff08;3&#xff09;完整代码 二、客似云来 &#xff08;1&#xff09;原题再现 &#xff08;2&#xff09;问题分析 &#xff08;3&#xff09;完整代码 一、剪花布条 &a…
阅读更多...
【Unity3D日常BUG】Unity3D打包WEBGL平台运行出现无法解析gzip、构建压缩等问题

【Unity3D日常BUG】Unity3D打包WEBGL平台运行出现无法解析gzip、构建压缩等问题

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 在Unity3D中打包WEBGL运行出现这样的错误&#xff1a; 具体分…
阅读更多...
第3章 高可用负载均衡集群规划

第3章 高可用负载均衡集群规划

作者&#xff1a;田逸&#xff08;formyz&#xff09; 开篇之初&#xff0c;先举几个反例&#xff0c;来说明事前规划的重要性。 案例一&#xff1a;某广告媒体公司&#xff0c;需要部署一套媒体播放系统&#xff0c;由一台应用服务器和一台数据库服务器组成&#xff0c;让人没…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023