js 感叹号!!

var ret = !!document.getElementById

等价于:

var ret = document.getElementById ? true : false;

  

  当值是非空字符串和非零数字返回true,当值是空字符串、0或者null返回false。

 

var a = " "; alert(!!a);   //true
var a = "s"; alert(!!a);   //true
var a = true; alert(!!a);   //true
var a = 1; alert(!!a);   //true
var a = -1; alert(!!a);   //true
var a = -2; alert(!!a);   //true

var a = 0; alert(!!a);   //false
var a = ""; alert(!!a);   //false
var a = false; alert(!!a);   //false
var a = null; alert(!!a);   //false

### 如何在 JavaScript 中实现鼠标悬停时显示感叹号提示文字的功能 要在 JavaScript 和 Vue.js 的环境中实现鼠标悬停时显示带有感叹号的工具提示(tooltip),可以按照以下方式构建功能。 #### 使用原生 HTML 和 CSS 实现 Tooltip 功能 如果不需要依赖框架,可以通过纯 HTML、CSS 和少量 JavaScript 来完成此效果: ```html <div class="tooltip-container"> <span>采购比重</span> <i class="el-icon-question" data-tooltip="自然年累计数据,每年1月1日-今日"></i> </div> <style> .tooltip-container { position: relative; display: inline-block; } .el-icon-question[data-tooltip]::after { content: attr(data-tooltip); visibility: hidden; background-color: black; color: white; text-align: center; border-radius: 5px; padding: 5px; width: max-content; position: absolute; z-index: 1; bottom: 100%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s ease-in-out; } .el-icon-question:hover[data-tooltip]::after, .el-icon-question:focus-visible[data-tooltip]::after { visibility: visible; opacity: 1; } </style> ``` 上述代码通过 `data-tooltip` 属性存储提示内容,并利用伪元素 `::after` 结合 CSS 进行动态展示[^2]。 --- #### 借助 Vue.js 方法动态生成 Tooltip 对于更复杂的场景或者需要支持更多交互逻辑的情况,可以在 Vue.js 中使用方法来动态创建 Tooltip。以下是基于 Vue.js 的解决方案: ```vue <template> <el-table-column :render-header="renderHeader" label="采购比重" prop="xxxx"></el-table-column> </template> <script> export default { methods: { renderHeader(h, { column }) { return h( 'div', [ h('span', {}, `${column.label}`), h('el-tooltip', { props: { content: '自然年累计数据,每年1月1日-今日', placement: 'top' } }, [h('i', { class: ['el-icon-question'] })] ) ] ); } } }; </script> ``` 在此示例中,Vue 提供了一个灵活的方式用于渲染自定义表头组件。`el-tooltip` 是 Element UI 组件库中的一个内置组件,它能够轻松处理悬浮提示的效果[^1]。 --- #### 利用第三方库 Tippy.js 实现高级 Tooltip Tippy.js 是一款轻量级且强大的 Tooltip 插件,适合复杂需求的应用程序开发。下面是如何集成它的例子: ```html <!-- 引入 Tippy.js --> <link href="https://unpkg.com/tippy.js@6/animations/scale.css" rel="stylesheet" /> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://unpkg.com/tippy.js@6"></script> <i id="question-mark" class="el-icon-question">?</i> <script> tippy('#question-mark', { content: '自然年累计数据,每年1月1日-今日', animation: 'scale', arrow: true, theme: 'light-border', interactive: true, }); </script> ``` 这段脚本初始化了 Tippy.js 并将其绑定到指定 DOM 节点上。当用户将鼠标移动至图标上方时会触发提示框显示[^3]。 --- ### 总结 无论是采用简单的 HTML/CSS 技术栈还是借助现代前端框架以及插件库都可以很好地满足鼠标悬停后弹出提示的需求。具体选择取决于项目的技术背景和个人偏好。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值