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操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue如何获取自定义元素属性参数值的方法

    vue如何获取自定义元素属性参数值的方法

    偶尔还是会陷入到DOM操作上面去,其实你应该关心的是数据传递,而不是操作DOM.如果你是想获取data-num的数据,可以这样写: <span @click="getData($event,'21')">55</span> getData:function (e,num) { console.log(num) } 这样就可以取到这个值了,如果你是确实想操作DOM,那你可以这样写: <span data-num="21" ref=&quo

  • 在VUE style中使用data中的变量的方法

    最近项目中的公共组件,在复用的时候,针对不同的场景,需要不断变更CSS里样式的值,而且已经有了全局的公共组件样式了 如果用vue传统的动态绑定class和style的方式去修改样式(文末会提到),需要额外写很多变量和模块class,那如果我的样式的值,可以从父组件,传到子组件,子组件根据传入值去渲染对应样式的值,其实就是要再style中使用data和props中的变量,这要怎么做呢? 其实很简单,只需要三步,大家来看: 1.HTML结构 <Upload ref="upload"

  • vue获取当前点击的元素并传值的实例

    html: <span @click='zan(pl.id)' :data-id='pl.id'></span> js: zan(e){ var target=event.target; var dataid=e;//(pl.id的值); $(target)//当前点击的dom } 以上这篇vue获取当前点击的元素并传值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中兄弟组件之间互相传值实例 vue.js获得

  • 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

  • vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法

    this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect(); //示例: 获取元素距离顶部的距离 this.$refs.journalUpward.getBoundingClientRect().top 以上这篇vue获取元素宽.高.距离左边距离,右,上距离等还有XY坐标轴的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue获取DOM元素并设置属性的两种实现方法

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素 注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值 如果给子组件

  • vue获取dom元素注意事项

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.log(this.$refs.bodyFont.offsetHeight); } } vue想要获取dom元素的高,一般情况下我们都可以想到写在mounted函数里,即dom加载完再获取,但是结果并不如我们所想,又想到用一个 this.$nextTick(()=>{ //函数 }) 来获取,发现根本没用啊

  • vue获取data数据改变前后的值方法

    场景:购物车增加商品数量同时更新bridge标志上的总商品个数,如果只是加上当前变化后的数量的话则之前原有的数量会被重新添加一遍造成计算错误.因此要减去变化前的数量才能得到添加的数量. 方法一: 直接watch监听data的数据 watch: { a (now,old) { console.log(now,old) } } old为旧的值now为更新后的值 方法二:自定义指令 通过自定义指令将更新前的值绑定到对应自定义指令的元素的dataset上然后在vue文件里面通过ref获取到元素来获取旧的

  • Vue v-for循环之@click点击事件获取元素示例

    应用背景 浏览论坛的贴子(数据库的数据通过vue遍历在html页面上) 点击帖子的标题.图片,可以查看详细的帖子(点击事件获取id) 1.设置一个隐藏值的放置Id的div,点击div就获取id,传参到后台(点击一部分) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <

  • Vue获取页面元素的相对位置的方法示例

    今天在开发源码一处发现有一处需要获取元素的相对位置高度,发现getBoundingClientRect有一个问题,它是用于获取某个元素相对于视窗的位置集合,达不到我想要的要求,如是看到阮老师写的一篇文章,关于用Javascript获取页面元素的位置,很好解决了我的我问题 发现问题 当我滚动到元素的位置时候,我想把元素固定在头部 // html 结构 <div :class="['source-subnav', isFixed ? 'tab-nav-fixed' : '']" re

  • Vue获取DOM元素并修改属性的方法

    Vue获取DOM元素 Vue获取DOM元素有两种方法 直接给相应的元素加id,然后再使用document.getElementById("id");获取 使用ref,给相应的元素加ref=“name”然后再使用this.$refs.name获取到该元素 Vue获取到元素并修改属性或者样式 使用上述的第二种方法,获取到元素,然后使用this.$refs.元素元素的ref对应的name.style.属性名(样式或者其他的属性名) = “你要设置的值”或者元素的ref对应的name.属性名(

  • Vue组件文档生成工具库的方法

    Vue组件文档生成工具库的方法

    目录 解析.vue 文件 提取文档信息 提取组件名称.描述.props.methods.model 提取描述 提取 methods 提取 props 提取 model 提取组件Events 提取组件Slots 结语 程序员最讨厌的两件事情,第一种是写文档,另一种是别人没有写文档.有没有直接根据vue组件生成文档的呢?当然是有的的.但第三方使用起来不一定能和现有项目结合使用,往往需要额外的注释用来标记提取信息.使用第三方的一些比较常见问题 文档提取信息不全面,可能有些信息你需要提取但是它又不支持.

随机推荐