vue.js - 在 vuejs 中获取 scroped CSS 属性的最可靠方法是什么?
问题描述
在 vuejs 中,元素被分配了一个以 'data-v-***' 开头的属性
我找不到任何有关获取此值的文档,因此最终使用了 refs 并获取了主节点的属性:
<template>
<div class="m-colour-picker" ref="thisContainer">
...
</div>
</template>
const attributes = this.$refs.thisContainer.getAttributeNames();
let dataAttribute = '';
attributes.forEach((attribute: string) => {
if (attribute.substring(0, 5) === 'data-') {
dataAttribute = attribute;
}
});
但是感觉有点强迫..vue中有没有一种方法可以获取这个已经内置的?
解决方案
这与 Vue.js 关系不大。任何元素的数据属性都会自动与其内部dataset
对象同步。
例子:
console.log(foobar.dataset);
console.log(foobar.dataset.vFoo);
console.log(foobar.dataset.vBar);
// notice how data attributes containing more than the initial data- dash
// are automatically transformed to camel case:
// data-v-foo-bar ===> dataset.vFooBar
console.log(foobar.dataset.vFooBar);
// if all you care about is the names of the attributes:
console.log(Object.keys(foobar.dataset));
<div id="foobar" data-v-foo="bar" data-v-bar="baz" data-v-foo-bar="foobaz"></div>
推荐阅读
- spring-boot - 是否建议使用 JSON Schema Validation 代替 Spring Boot Rest API 的 Bean Validation JSR303?
- android-layout - Xamarin :: 拖放只工作一次
- android - 重用视图组
- autodesk-forge - setThemingColor 和 setSelectionColor 不需要的混合
- apple-push-notifications - APN 未交付
- javascript - 根据内容将类应用于表格单元格
- javascript - 在一个抽屉导航器中的堆栈导航器之间传递数据
- swift - 我真的不知道为什么我的 collectionViewCell 消失了
- r - Tidyverse 按行绑定未命名向量列表的方法 - do.call(rbind,x) 等效
- javascript - 使用 react-native-background-timer 实现计时器,标识符“秒”已被声明