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 相关文章推荐
用javascript操作xml
Nov 04 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
WebPack基础知识详解
Jan 16 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 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中str_replace函数使用小结
2008/10/11 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
python类继承与子类实例初始化用法分析
2015/04/17 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python3 处理JSON的实例详解
2017/10/29 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
python定义类self用法实例解析
2020/01/22 Python
Python持续监听文件变化代码实例
2020/07/22 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
Hammitt官网:设计师手袋
2020/05/23 全球购物
原材料检验岗位职责
2014/03/15 职场文书
仓库管理计划书
2014/05/04 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server