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 相关文章推荐
jquery 弹出层实现代码
Oct 30 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
javascript实现下雨效果
Mar 27 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
详解Node全局变量global模块
Sep 28 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日期时间函数的高级应用技巧
2009/05/16 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
Python自动重试HTTP连接装饰器
2015/04/28 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
材料采购员岗位职责
2013/12/17 职场文书
户外拓展活动方案
2014/02/11 职场文书
yy婚礼主持词
2014/03/14 职场文书
Redis keys命令的具体使用
2022/06/05 Redis