v-bind 例子 冒号：

已于 2023-09-01 16:46:22 修改
阅读量108 收藏
点赞数
分类专栏： web_html 文章标签： javascript
于 2023-08-30 15:37:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wowocpp/article/details/132583865
版权

v-bind 例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <img src="./imgs/10-02.png" alt="" title="hello 波仔">
    <img v-bind:src="imgUrl" alt="" v-bind:title="msg">
    <img :src="imgUrl" alt="" :title="msg">
    <img src="./imgs/10-02.png" alt="">

  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>

  <script>

    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'Hello 波仔'
      },

    })
  </script>
</body>

</html>

演示
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

wowocpp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发：Vue组件中的冒号用法
软贱开发攻城狮
06-16 6796
在Vue组件的使用中某一变量名前面加冒号，其实是为了动态的绑定一个变量或者表达式。在Vue.js中明确有一节是关于冒号用法的，其实冒号是v-bind的缩写，也就是冒号用法就是v-bind用法。那么下面就来看看关于v-bind相关的内容。v-bind的缩写就是":"。预期：动态地绑定一个或者多个attribute，或者一个组件prop到表达式。在绑定class或者style attribute的时候支持其他类型的值，如数组或者对象。在绑定prop时，prop必须要在子组件中声明，可以用修饰符指定不同的绑定类型
vue3知识点2. 常用指令v-model :value v-if v-show v-for v-bind: :class :style v-on @
yangyangdt的博客
12-19 9239
vue3基础知识点2 前言： 上一章已经学会如何创建vue实例了，这一章是vue一些的基础知识点，包括模板语言，以及常见的一些命令。最底部有运行好的全部代码链接。
v-bind，v-on 缩写， 冒号与@
白袍小将的博客
08-22 607
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> <!-- 动态参数的缩写 (2.6.0+) --> <a :[key]="url"> ... </a> v-on缩写 <!-- 完整语法 --> <a v-on:click="doSomething">...&..
【Vue】v-bind(:冒号)与v-on(@)
CCC0203的博客
06-17 851
v-bind用于绑定html属性。 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> v-on 用于绑定html事件。 <!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"&gt
vue组件的冒号属性 v-bind与v-on
weixin_42076211的博客
06-15 4582
：是v-bind的缩写，加了冒号，后面是变量或表达式；不加冒号的是字符串
Vue-指令之v-bind（简写冒号:-03）
404路西法的博客
04-18 4978
（一）v-bind 属性绑定 简写是冒号: 如果需要给元素的属性绑定内容，需要通过v-bind:指令实现. 注意： v-bind可以绑定普通属性、绑定属性class。 A-绑定普通属性： 、 再比如Dome： 效果： B-属性绑定class 比如Dome： 效果： C-绑定style属性 比如Dome： 效果： ---下一章讲解 v-...
关于vue中v-bind后不带冒号，而带等号的说明(v-bind=“obj“)
weixin_42920104的博客
09-06 1372
关于vue中v-bind后不带冒号，而带等号的说明(v-bind=“obj”) 由于v-bind支持v-bind="obj"的用法（其中obj为一个对象，譬如obj = {class: class1, style: style1}），若你传入的obj为一个数组，比如为obj = ['a', 'b', 'c']，那么obj会将其解析为{'0': 'a', '1': 'b', '2': 'c'} 注意：若v-bind用在slot标签中，即子组件Child.vue中模板里包含<slot v-bind="
【Vue】`v-bind` 指令详解：动态绑定属性的强大工具
最新发布
lph159的博客
07-19 782
v-bind是 Vue.js 提供的指令之一，用于动态绑定 HTML 属性。它的基本语法如下：
vue3中的v-bind
qq_51976882的博客
02-08 1120
v-bind是 Vue.js 中的一个核心指令，用于在 Vue 组件或 DOM 元素上绑定数据属性。它允许你将 Vue 实例中的数据或计算属性绑定到 DOM 元素的属性上。当数据发生变化时，v-bind会自动更新 DOM 元素的属性。v-bind的简写形式是冒号。例如，v-bind:src可以简写为:src。以下是v-bind
flask 网页 javascript 按钮 点击事件
abc
11-14 9346
代码: #!/usr/bin/env python # -*- coding: utf-8 -*- from flask import Flask from flask import Flask from flask import render_template from flask import request from flask import redirect from flask im...
postman使用
abc
02-16 7026
postman使用 http://httpbin.org/post http://httpbin.org/post http://httpbin.org/post?data=1222&name=2222&password=3333
红米手机 导出 通讯录 到电脑保存
abc
09-27 4428
此电脑\Redmi Note 5\内部存储设备\MIUI\backup\AllBackup\20230927_043337。手机 设置 ---- 更多设置 ----- 备份与恢复 ----- 手机 备份 恢复 ----- 手机 备份。如何将 bak文件 转换成txt文件？用 usb 线 连接 手机 和 电脑。选择 短信 联系人和通话记录。不要安装什么 手机助手。会出现下面的 一个 盘。-------立即备份。不要安装 什么app。
mongoose Web服务器 嵌入式 web服务器
abc
04-27 2884
mongoose Web服务器 Mongoose - Embedded Web Server 参考链接 https://github.com/cesanta/mongoose/tree/master/examples https://github.com/cesanta/mongoose Download Mongoose Source Code here Ask questions on support forum Read User Guide and API reference Study mong
Win7 下安装及使用NVM node.js
abc
12-15 2468
参考文档： 环境： win7 64位 参考博客 nvm安装与使用nvm下载不同版本nodejs https://blog.csdn.net/seu_lxy/article/details/94635659 https://blog.csdn.net/gaoqiang1112/article/details/80898134 node管理工具 nvm 下载安装和使用 node 配置全局环境 http...
chrome 浏览器远程控制与调试（一）
abc
09-27 2356
chrome 浏览器远程控制与调试（一） 远程调试启动： chromium-browser --remote-debugging-port=9222 --user-data-dir='~/code/chrome-test' 命令： http://localhost:9222/json/protocol #获取协议 http://localhost:9222/json/version #获取版本 http://localhost:9222/json/list #或者 http://localhost:92
导出视频里的字幕
abc
10-05 2214
如何快速提取视频中的字幕？给大家介绍一种简单高效又免费的提取方法。如何利用剪映快速提取并导出视频里的字幕。其他的不选中 点击字幕导出，txt，
mongoose 嵌入式 web服务器
abc
04-27 2016
Mongoose是一个web服务器，  通过提供一个web接口给它，  它可以嵌入到现有的应用程序中去。   Mongooseweb服务器的执行是自满足的，它不依赖于任何其他服务。  如果你将它复制到任何目录并执行，  它将将启动web服务并将当前目录作为主目录、端口号是8080。 mongoose的源码地址：https://github.com/cesanta/mongoose mongoose的用户手册：https://www.cesanta.com/developer/mongoose
django settings目录 生产环境和 开发环境分开
abc
12-23 1659
参考 多环境下，配置django settings https://www.jianshu.com/p/ae85eac23f46 django settings多环境配置 https://www.cnblogs.com/dannyyao/p/10345905.html 【Django】项目开发准备之settings目录文件的创建配置 https://blog.csdn.net/mydistance...
vue中v-bind 的认知
04-01
在Vue中，v-bind指令可以使用简写形式，即使用冒号“:”代替v-bind，例如: ``` <img :src="imgUrl"> ``` 这个例子中，使用了v-bind指令将img标签的src属性绑定到了imgUrl数据上，当imgUrl数据发生变化时，img标签...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值