vue 获取元素额外生成的data-v-xxx操作


Posted in Javascript onSeptember 09, 2020

vue 获取元素额外生成的data-v-xxx操作

需求描述:由于样式中使用了scoped,所以编译后标签对中生成data-v-xxx属性。在【.dialog_content】的div中 动态添加元素节点p和span时,也需要给元素节点添加data-v-xxx属性。由于data-v-xxx属性是会变化的,那如何获取它,添加在动态添加的元素节点中呢?本博客将给出解决方案。

【解决方法】

获取属性名【document.getElementById("dialog_submit").attributes[0].name】

设置属性【nodeP.setAttribute(dataV, "")】

var nodeP = document.createElement("p"),
nodeSpan = document.createElement("span");
// 获取data-v-xxxx的值
var dataV = document.getElementById("dialog_submit").attributes[0].name;
// 设置属性
nodeP.setAttribute(dataV, "");
nodeSpan.setAttribute(dataV, "");

【补充知识】

当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。编译时将生成data-v-xxx属性,如下的“data-v-2bc3d899”就是因为加了scoped.

<style scoped>
.title {
 color:blue;
}
</style>
 
<template>
 <div class="title">hello</div>
</template>

上述代码被编译为:

<style>
.title[data-v-f3f3eg9] {
 color: blue;
}
</style>
 
<template>
 <div class="title" data-v-f3f3eg9>hello</div>
</template>

使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。

深度作用选择器:

如果希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,可以使用 >>> 操作符:

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码被编译为:

.a[data-v-f3f3eg9] .b { /* ... */ }

参考:https://vue-loader.vuejs.org/zh/guide/scoped-css.html

补充知识:vue 自定义属性 data-v,closest 获取事件源外层元素

在遇到使用e.target 的时候,通常会传一个参数,比较简单,在此记录一下

使用:data-XXX 来绑定

<div class="custom-tree-node"
        slot-scope="{ node, data }"
        :data-id="data.id"
</div>

获取 :

利用closeet 获取到当前目标元素最近的外层元素含有 custom-tree-node 类名的dom

然后再利用 dataset.id 拿到传的值

async handleTouchEnd (event) {
   let customNode = event.target.closest('.custom-tree-node')
   if (customNode) {
    let data = {}
    data.id = customNode.dataset.id
    }
}

以上这篇vue 获取元素额外生成的data-v-xxx操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
javascript实现日历效果
Jun 17 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 #Javascript
vue路由的配置和页面切换详解
Sep 09 #Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 #Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 #Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 #Javascript
vue实现几秒后跳转新页面代码
Sep 09 #Javascript
JS异步宏队列微队列原理详解
Sep 09 #Javascript
You might like
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
php中error与exception的区别及应用
2014/07/28 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
php常用表单验证类用法实例
2015/06/18 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
js Function类型
2011/12/04 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
python 生成不重复的随机数的代码
2011/05/15 Python
Python base64编码解码实例
2015/06/21 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
python日志模块logbook使用方法
2019/09/19 Python
毕业生的自我鉴定
2013/10/29 职场文书
经典大学生求职信范文
2014/01/06 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
学校施工安全责任书
2015/01/29 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
高一作文之暖冬
2019/11/09 职场文书
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技