vue 给div增加title属性

于 2021-01-29 15:11:35 发布
阅读量1.3w 收藏 13
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42949209/article/details/113388002
版权

在很多时候，我们页面上其实有时候展示不出来很多很多文字的，这个时候我们就不得不对这个文字进行处理，但是我们鼠标放到文字上时，还想展示所有的文字，这种方式其实有2种

第一种是运用element ui的一个组件Tooltip 文字提示，常常用于鼠标hover时的提示信息

话不多说上代码

<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top">
    <el-button>上边</el-button>
</el-tooltip>

鼠标放到上边这个按钮上会提示“Top Left 提示文字”这个几个字。如果想要让content根据内容变化的话，可以这么做

<el-tooltip class="item" effect="dark" :content="TipsContent" placement="top">
    <el-button>{{TipsContent}}</el-button>
</el-tooltip>

data(){
    return{
        TipsContent:'我是个内容'
    }
}

这样子的话，鼠标放在按钮上就会提示"我是个内容"啦，之后根据接口和实际用处修改TipsContent里面的内容就可以啦。

补充：placement是tooltip显示的位置，他总共有9种位置，分别是top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end，根据自己需要设置就好啦

说明：并不是只能在button上面加tooltip，div等标签也可以加tooltip，将el-button的那行代码换成自己显示的就可以啦

效果：

第二种是给div增加title属性，这种方法的话个人感觉会更容易让人接收

上代码

<div title="我就是一个内容内容内容内容">
    <span>我是一个内容</span>
</div>

这样子的话页面上只会显示“我是一个内容”，但是鼠标放上去会显示“我就是一个内容内容内容”

想让title动态变化的话也非常简单

<div :title="titleTips">
    <span>我是一个内容</span>
</div>

data(){
    return{
        titleTips:'我就是一个内容内容内容内容'
    }
}

这样就可以随意修改titleTips里面的内容啦

这个效果图我一截图他就消失，就不展示啦

有什么问题我们一起讨论呀~

 

走在路上的晶晶丫
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue中v-for循环给标签属性赋值的方法
12-29
1.给每个按钮添加class的属性值以及icon图标属性值，通过v-for实现自动添加样式，发现属性值无法显示，切记在属性前加上v-bind <html> <head> <meta charset=utf-8> <title>v-for在线测试实例</title> [removed] [removed]</head><body> <button v-bind:class=site
title显示不全的处理方法
热门推荐
april_4的博客
10-26 1万+
最开始比如字符串是 you are so ,直接title的话，是只显示you，遇到空格不显示，网上查说是半角空格和全角空格的问题，要替换，因为想把title的内容取下来传递给后端，所以不想替换来替换去，所以没有尝试 直接在字符串两端再加双引号，如'/"'+tmp+'/"',这样就可以显示出全部了，相当于又包裹一层~注意是双引号，不是单引号，如果是单引号，如果遇到缩写又卡住了，比如 yo
vue使用v-if v-show页面闪烁,div闪现的解决方法
12-12
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。 可以在根元素添加v-cloak来解决，并且设置它的样式即可。 代码只是示例，还需要自己修改测试。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 在引入的css文件中写入这个*/ [v-cloak] { display: none; } </style> </head> <body> <!-- 添加这个v-cloak --> <div id='ap
vue2.0获取自定义属性的值
12-29
最近在项目中使用了vue.js。在爬坑的路上遇到了很多问题。这里都会给记录下来，今天要说的是怎么获取自定义属性的值。 HTML <!DOCTYPE html> <html> <head> [removed][removed] <meta charset=utf-8> <title>JS Bin</title> </head> <body> <div id=app> <button v-for=list in items @click=getType(list.type) :type=list.type
vue动态设置页面title的方法实例
12-28
本文主要介绍了Vue动态修改title的方法，需要的朋友可以参考学习，方法如下： 1.通过自定义指令去修改（单个修改比较好） //1.在main.js 页面里添加自定义指令 Vue.directive('title', {//单个修改标题 inserted: function (el, binding) { document.title = el.dataset.title } }) //2.在需要修改的页面里添加v-title 指令 . 2.使用插件 vue-wechat-title //1.安装插件
DIV形式的title
11-20
DIV形式的title,你只要引用进来那个JS就可以了,页面只要写上你的title就可以了,<a href="http://hi.baidu.com/huqing7002" title="我的百度空间哈````">我的BLOG</a> 你只需要像这样写就可以了!
div标签里的title属性鼠标定位时title属性的内容自动展示
world_the_begin的博客
12-10 2582
<div title="测试标题"> 短标题 </div> 效果：
div的title属性
nrain01的专栏
12-23 5545
title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。 而且title文字也可以换行，在需换行的地方添加 ＆#10; (将＆改为半角，下同)或 ＆#13; 来实现： &lt;div title="爱学者论坛＆#10;http://bbs.iaixue.com ＆#13;呵呵，看到了吧！！"&gt;鼠标移到这里...
div 属性 DIV标签属性有什么如何设置属性
qq_41446775的博客
09-19 6461
div 属性介绍，对DIV可加属性有哪些，DIV属性一览表DIVCSS5整理 DIVCSS5给大家整理DIV标签内常用属性，同时通过div各属性小实例，让大家认识各属性并掌握属性。 div标签内常用属性列表 1、style 设置css样式(扩展了解style标签) 2、align 设置div盒子内的内容居中、居左、居右 3、id 引人外部对应#（井号）选择符号样式 4、class 引人外部对应.（...
DIV的属性
weixin_30314813的博客
05-13 1974
一、常用属性 1、Height:设置DIV的高度；Width:设置DIV的宽度。 2、margin:用于设置DIV的外延边距，也就是到父容器的距离。margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；margin: [top][right][bottom][left] 可以分别设置：margin-left:到父容器左边框的距离；margin-right:到父容器右边框的距...
vue组件watch属性实例讲解
12-29
本文实例为大家分享了vue组件watch属性的具体代码，供大家参考，具体内容如下 <!doctype html> <html> <head> <meta charset=UTF-8> <title>wacth属性</title> [removed][removed] </head> <body> <div id=container> <p>{{msg}}</p> <my></my> </div> [removed] Vue.component(my-component,{ d
基于Vue的SPA动态修改页面title的方法(推荐)
01-19
最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼，而且在IOS的微信端据说没效果。百度发现要针对IOS的微信做点额外的操作，即：创建一个隐藏的Iframe，然后随便加载一个图片文件，然后加载完成移除，这样就能修改页面title了。网上有几种方案： 1，App.Vue里面设置title属性，然后页面title去绑定，所有子组件修改标题就通过 this.$root.data.title=xxxxx;去修改 缺点：App.Vue默认的el只是body的一个DIV，这样干需要绑定整个html 2，通过自定义指令实现 Vue.direc
dz模板百家社区-门户 商业完整【GBK版】 价值598元.rar
11-13
介绍 页面采用DIV+css切图制作, 代码整洁, 适合各种行业, 兼容各大浏览器;风格采用全新1190px自适应界面设计 - 对模板结构、内容分布、代码以及图片按钮等各类效果、整体页面都做了超多细节美化修改! - 页面模块和插件缓存模块结合调用，用户体验更舒适，运行速度更好; - 模板页面自动识别伪静态，地址自动判断，无须再作其他设置; - 所有调用增加title代码,优化SEO,大大增加了搜索引擎收录机率; - 头尾导航全部后台管理，操作更方便，管理更省心; - 模板完美支持自适应宽窄屏切换功能; 希望大家喜欢，具体怎么样，大家看演示吧！ 注意： 体验版跟商业版区别 体验版仅有论坛 等。。。 商业版是完整版跟效果图演示站是一样的等。。 +版本支持：discuzx3.0版本，discuzx3.1版本，discuzx3.2版本。包括网站首页，论坛首页，论坛列表页，论坛内容页，论坛瀑布流,资讯列表页，资讯内容页（支持多个） 使用方法 1.在后台应用中心直接下载安装进入界面——风格——安装;选择成为默认 ；然后进入工具;更新缓存 2.下载DIY文件 3.论坛主题列表方法 后台——界面设置——主题列表页——左侧版块导航宽度:0 5.论坛图标--后台--论坛--编辑论坛版块--里面上传图标 【diy导入】 前台进入diy高级模式，点击蓝色的编辑进入diy弹出框设置各个选项 注：免费版只有论坛部分页面商业版包括全部 -------------------------------------------------- diy导入 前台进入diy高级模式，点击蓝色的编辑进入diy弹出框设置各个选项 1：门户首页导入diy文件夹内的 portal_index.xml 文件 2： 后台门户——新建频道——编辑——列表页模板名——选择xinglan开头的文件,开启频道。前台页面导入portal_list.xml文件() 3：文章内容页导入portal_view.xml文件 4：论坛首页导入forum_discuz.xml文件 5：帖子内容页导入forum_viewthread.xml文件
ASP.NET 控件的使用
04-02
第一部分 构建ASP.NET页面 第1章　ASP.NET Framework概览 2 1.1 ASP.NET和.NET Framework 5 1.1.1　框架类库 5 1.1.2 公共语言运行库 9 1.2 ASP.NET控件 10 1.2.1 ASP.NET控件概览 11 1.2.2 HTML控件 12 1.2.3 理解和处理控件事件 12 1.2.4 视图状态 17 1.3 ASP.NET页面 20 1.3.1 动态编译 20 1.3.2 控件树 23 1.3.3 使用代码隐藏页面 24 1.3.4 处理页面事件 27 1.3.5 使用Page.IsPostBack属性 29 1.3.6 调试和跟踪ASP.NET页面 30 1.3.7 跟踪页面执行 33 1.4 安装ASP.NET Framework 35 1.5 小结 37 第2章　使用标准控件 38 2.1 显示信息 38 2.1.1 使用Label控件 38 2.1.2 使用Literal控件 42 2.2 接收用户输入 44 2.2.1 使用TextBox控件 44 2.2.2 使用CheckBox控件 50 2.2.3 使用RadioButton控件 52 2.3 提交表单数据 55 2.3.1 使用Button控件 55 2.3.2 使用LinkButton控件 57 2.3.3 使用ImageButton控件 59 2.3.4 Button控件使用客户端脚本 62 2.3.5 执行跨页面发送 64 2.3.6 指定默认按钮 67 2.3.7 处理Command事件 68 2.4 显示图像 70 2.4.1 使用Image控件 70 2.4.2 使用ImageMap控件 71 2.5 使用Panel控件 75 2.6 使用HyperLink控件 79 2.7 小结 81 第3章　使用验证控件 82 3.1 验证控件概述 82 3.1.1 验证控件与JavaScript 85 3.1.2 使用Page.IsValid 85 3.1.3 设置Display属性 86 3.1.4 突出显示验证错误 86 3.1.5 使用验证组 90 3.1.6 禁用验证 93 3.2 使用RequiredFieldValidator控件 94 3.3 使用RangeValidator控件 97 3.4 使用CompareValidator控件 99 3.5 使用RegularExpressionValidator控件 103 3.6 使用CustomValidator控件 105 3.7 使用ValidationSummary控件 111 3.8 创建自定义验证控件 114 3.8.1 创建LengthValidator控件 115 3.8.2 创建AjaxValidator控件 117 3.9 小结 121 第4章　使用Rich控件 122 4.1 接收上传文件 122 4.1.1 把文件保存到文件系统 123 4.1.2 把文件保存到数据库 125 4.1.3 上传大文件 128 4.2 显示日历 133 4.2.1 创建弹出式日期选择器 135 4.2.2 根据数据库表呈现日历 137 4.3 显示广告 141 4.3.1 在XML文件中保存广告 141 4.3.2 在数据库表中存储广告 144 4.3.3 跟踪显示和转到 145 4.4 显示不同的页面视图 149 4.4.1 显示选项卡式页面视图 149 4.4.2 显示多部分表单 152 4.5 显示向导 153 4.6 小结 157 第二部分 设计ASP.NET网站 第5章　使用母版页设计网站 160 5.1 创建母版页 160 5.1.1 创建默认内容 163 5.1.2 嵌套母版页 166 5.1.3 在母版页中使用图片和超链接 170 5.1.4 在Web配置文件中注册母版页 172 5.2 修改母版页内容 172 5.2.1 使用Title属性 173 5.
Vue Prop属性功能与用法实例详解
01-19
本文实例讲述了Vue Prop属性功能与用法。分享给大家供大家参考，具体如下： 1 Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你...
学习vue.js计算属性
12-29
关于vue.js的计算属性练习代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>vuejs计算属性</title> </head> <body&...
Vue 使用Props属性实现父子组件的动态传值详解
12-30
如下所示： <!DOCTYPE html> <... <head> <meta charset=UTF-8>...title>Title</title>...<div id=prop-example-2> <input v-model=parentMsg> <child v-bind:my-message
vue实现鼠标移入移出事件代码实例
12-29
本文实例为大家分享了vue实现鼠标移入移出事件的具体代码，供大家参考，具体内容如下 <div class=index_tableTitle v-for=(item,index)> <div class=indexItem> <span title=item.name>{{item.name}} (index)...
Vue监听事件实现计数点击依次增加的方法
12-29
1.实现计数器功能，每点击一次按钮，count值增加一或增加二，鼠标在cordinates行移动时会更新当前坐标，通过自定义函数或者stop属性禁止事件传播。 效果如下： 代码如下： <!DOCTYPE html><html><head...
vue中的div的title使用数组中的元素
最新发布
06-14
在Vue中，可以使用插值表达式（{{}}）和v-bind指令将数组中的元素作为div的title属性值，例如： ```html <div v-bind:title="myArray[0]">{{ myArray[0] }}</div> ``` 其中，myArray是一个包含元素的数组，上述代码会将myArray数组中的第一个元素作为div的title属性值，并将该元素插入到div中。如果想要将其他元素作为title属性值，只需要将索引号从0改为相应的数字即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值