Vue中在标签的属性中引用变量值 例如title src

已于 2022-08-19 13:38:17 修改
阅读量2.9k 收藏 1
点赞数 1
文章标签： vue.js 前端 javascript
于 2022-08-19 13:33:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42434282/article/details/126423099
版权

Vue初学，因为使用省略号隐藏了超长的内容，使鼠标悬浮显示全部，想给title中添加变量值

Vue中想要在""（带引号的）属性中使用{{ 变量 }}，需要在属性前添加:（冒号）

例如：

<span class="avatarName" :title="item.user.nickname">{{ item.user.nickname }}</span>

<img class="avatarUrl" :src="item.user.avatarUrl" alt="">

属性前添加：就可以直接使用变量值啦，记得引号中不要加大括号

就可以显示啦

 

我们去练火眼金睛i
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue.js在标签属性中插入变量参数的方法
12-29
html的标签的属性，比如id、class、href需要动态传递参数，拼接字符串，查了一些资料，并没有找到合适的解决方法，琢磨了一上午，终于试出了方法： v-bind:属性=“ ‘字符串’+自定义变量名”，自己试了没问题，有需要的朋友可以借鉴下！ 最后需要注意一下属性一定是“:属性=”这种形式才会起作用
vue页面的标签属性使用变量
TGA麻辣香锅的博客
10-26 7027
解决方法： 用例子解说 <table v-for="(value,key) in tb_light_inspect_detail" > <tr> <td>检查情况</td> <td colspan="3"> <textarea :id="key" :name="'tb_light_inspect_detail['+key+'].inspect_description'" type="text" &g
Vue使用
weixin_63473024的博客
02-24 382
心得 vue能双向绑定数据,数据驱动视图,数据和视图分离的,相比传统的网页,vue是单页面值刷新某一小部分,开发的时候效率会更高 各种指令 1.v-html='vue变量' 使用的时候可以识别标签, --会覆盖插值表达式 2.v-text='vue变量' 使用的时候不能识别标签 --会覆盖插值表达式 3.v-show 是在样式中设置display:none 样式,频繁的切换使用的时候用 4.v-if 直接重dom树上移除 数据多的时候不建议使用,影响性能 5.v-for 是循环列表的渲...
在vue项目中title属性值是个变量值该如何设置（超出部分省略显示，当鼠标悬停时显示全部内容）
weixin_40425415的博客
08-29 5652
超出部分省略显示的CSS设置： { overflow: hidden; /*溢出部分不显示*/ white-space: nowrap;/*强制不换行*/ text-overflow: ellipsis;/*省略部分用省略号（...）显示*/ } 鼠标悬停时提示全部内容（为标签添加title属性） <span title="这是内容，超出会省略"&g...
2020-10-24
HelloWorld1626的博客
10-24 151
类数组对象转换为数组 假如domList是一个DOM集合。 (1) Array.from()方法 let list = Array.from(domList); (2) …展开操作符 let list = [...domList]; (3) Array.prototype.slice.call()方法 let list = Array.prototype.slice.call(domList); (4) Array.prototype.forEach.call()方法 //直接对domList集合进行
vue2/vue3 js变量在＜style＞标签中使用
weixin_46029283的博客
03-07 1906
vue2/vue3分别将js变量应用于标签内样式上
vue定义一个变量并显示
学亮编程手记
02-25 2476
vue中tab选项卡的实现思路
10-17
在Vue.js中，实现Tab选项卡是一个常见的需求，它用于展示和切换不同的内容区域。本文将详细介绍如何在Vue中创建一个基本的Tab组件，并探讨其核心思路和应用场景。 首先，让我们看看主要的应用场景： 1. 不同注册和...
vue2中filter()的实现代码
08-30
在上面的代码中，我们使用 `reverseString` 过滤器来将 `msg` 变量的值反转，并将结果显示在页面上。 需要注意的是，在 Vue 2.0 中，过滤器只能使用函数式写法，例如 `reverseString( 'Hello:' )`，而不能使用空格...
vue@cli3项目模板怎么使用public目录下的静态文件
10-15
同时，注意模板中的`img`标签使用了`v-bind:`（简写为`: `）来动态绑定`src`属性，这样可以确保`publicPath`的值被正确插入。 对于`index.html`中的favicon图标，你可能已经注意到它也使用了类似的方式来引用。例如...
vue 如何添加全局函数或全局变量以及单页面的title设置总结
08-30
本篇文章主要介绍了vue 如何添加全局函数或全局变量以及单页面的title设置总结，非常具有实用价值，需要的朋友可以参考下
vue的for循环使用方法
10-17
例如，在例子中，每个`site`对象都有一个`name`属性，我们使用`{{site.name}}`将其显示在`<li>`元素中。 3. **HTML模板**： `v-for`通常与HTML元素结合使用，例如`<ul>`和`<li>`，以创建列表。在例子中，`<li>`...
2024.1.5 使用vue编写hello world
01-10
在Vue中，这个过程通常涉及到创建一个新的Vue实例，并在其`data`选项中定义一个变量来存储要显示的信息。 下面是一个简单的Vue 2.0 "Hello, World!"示例： ```html <!DOCTYPE html> , initial-scale=1.0"> ...
Vue之变量赋值
weixin_42693164的博客
10-14 1万+
前些天写Vue项目遇见一个很有意思问题：将一个数据（类型是对象）赋值给一个变量，当我去改变这个变量的时候，给它赋值的数据也跟着变化了，当我去改变数据时，变量也跟着变了，这让我想起了js中的浅复制和深复制，为验证，将对象（引用类型）改成字符窜（基本数据类型），果然，这个问题就不见了。 在js中有两种数据类型 （1） 基本数据类型：number、string、boolean、null、undefine...
Vue的标签属性label中字符串拼接变量
热门推荐
lightingsui的博客
02-01 1万+
问题 问题描述：Vue的标签属性label中字符串拼接变量 问题解决 <el-form-item :label="`参数${(index + 1)}类型`" v-for="(item, index,) in props.row.params"> <span v-text="item"></span> </el-form-item> 结果展示...
将Vue实例的变量显示到页面，方便实时查看Vue实例变量
飞蛾逐月
11-22 4177
文章目录页面效果代码注意参考文献 页面效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.min.js"></script> </head> <body> <div id="vue_d
vue显示数据
Jack-Hou的博客
04-08 1779
请求发送、拿到数据在vue里如何显示 <template> <el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"> </el-tree> </template> <!--:data="menus" ，数据绑定、绑定data()的属性menus,用于显示数据 props="defaultProps" 显示方式绑定 绑定的是defaultProp
vue:用 两个大括号 你就可以 引用 变量 的值
非正经研究生的猪圈
09-18 898
备注： 其他 方式 '$route.query.redirect' “$route.query.redirect“ `$route.query.redirect` 你都无法 访问 这个 变量
【vueUse库Component模块各函数简介及使用方法--上篇】
最新发布
xiejunlan的博客
07-02 1352
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
vue.js 在html文件中挂载使用
07-15
在 `data` 属性中定义了一个 `message` 变量，可以在 HTML 中使用双花括号语法 `{{ message }}` 来显示该变量的值。 当页面加载时，Vue.js 会自动找到 id 为 "app" 的元素，并将其内容替换为 Vue 实例中定义的模板...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值