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 相关文章推荐
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 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
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
PHP排序算法类实例
2015/06/17 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
详解vue中组件参数
2018/07/09 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
软件测试工程师结构化面试题库
2016/11/23 面试题
公司营业员的工作总结自我评价
2013/10/05 职场文书
优秀党员获奖感言
2014/02/18 职场文书
股东合作协议书
2014/04/14 职场文书
诚信承诺书模板
2014/05/26 职场文书
股指期货心得体会
2014/09/10 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书