vue 出现data-v-xxx的原因及解决


Posted in Javascript onAugust 04, 2020

现象:

在Vue开发中,会遇到html被浏览器解析后,在标签中出现'data-v-xxxxx'标记,如下:

<div data-v-fcba8876 class="xxx"> aaa</div>

原因:

来看官方解释:

<style scoped>
 @media (min-width: 250px) {
  .list-container:hover {
   background: orange;
  }
 }
</style>

The optional scoped attribute automatically scopes this CSS to your component by adding a unique attribute (such as data-v-21e5b78) to elements and compiling .list-container:hover to something like .list-container[data-v-21e5b78]:hover.

本人理解:

这是在标记vue文件中css时使用scoped标记产生的,因为要保证各文件中的css不相互影响,给每个component都做了唯一的标记,所以每引入一个component就会出现一个新的'data-v-xxx'标记

补充知识:vue---获取元素额外生成的data-v-xxx

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 { /* ... */ }

以上这篇vue 出现data-v-xxx的原因及解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
详解vue-cli3使用
Aug 14 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 #Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 #Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 #Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 #Javascript
如何在Vue.JS中使用图标组件
Aug 04 #Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 #Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 #Javascript
You might like
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
功能强大的php分页函数
2016/07/20 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
python重试装饰器示例
2014/02/11 Python
Django中的Signal代码详解
2018/02/05 Python
用pycharm开发django项目示例代码
2018/10/24 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
详解python logging日志传输
2020/07/01 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
联强国际笔试题面试题
2013/07/10 面试题
做人民满意的公务员活动方案
2014/08/25 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
不同意离婚答辩状
2015/05/22 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang