Vue 获取自定义属性的值
时间: 2023-08-09 18:04:46 浏览: 53
可以使用 `getAttribute` 方法来获取元素的自定义属性值。例如,如果你有一个自定义属性 `data-id`,可以使用以下代码来获取其值:
```javascript
var element = document.getElementById('my-element');
var id = element.getAttribute('data-id');
```
如果你在 Vue 组件中使用,可以使用 `$refs` 来获取元素的引用,然后通过引用来获取自定义属性的值。例如:
```html
<template>
<div ref="myElement" data-id="123">My Element</div>
</template>
<script>
export default {
mounted() {
var element = this.$refs.myElement;
var id = element.getAttribute('data-id');
console.log(id); // 输出 123
}
}
</script>
```
相关问题
vue获取自定义属性值
在Vue中获取自定义属性值有两种方法:
方法一:通过操作DOM来获取自定义属性值。可以使用`this.$refs`来获取具有`ref`属性的元素,然后通过`dataset`来获取自定义属性的值。例如:
```javascript
<selectBrand(e) {
console.log(this.$refs.dataSelf.dataset.index); // 获取到循环中的下标值
}
```
方法二:通过事件对象来获取自定义属性值。可以使用`e.target.getAttribute`方法来获取自定义属性的值。例如:
```javascript
<selectBrand(e) {
console.log(e.target.getAttribute('show')); // 获取到循环中的IsShow的值
}
```
可以根据具体的需求选择使用其中的一种方法来获取自定义属性值。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue自定义属性的设置及获取](https://blog.csdn.net/MYTLJP/article/details/100038411)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [vue如何获取自定义元素属性参数值的方法](https://blog.csdn.net/coldriversnow/article/details/124143065)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
vue获取子节点自定义属性
你可以通过 `$refs` 属性获取子组件的 DOM 节点,并使用 `getAttribute()` 方法获取自定义属性。例如:
```html
<template>
<div>
<child-component ref="child"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
mounted() {
const childNode = this.$refs.child.$el;
const customAttr = childNode.getAttribute('custom-attr');
console.log(customAttr);
}
}
</script>
```
在上面的例子中,`ChildComponent` 组件的 DOM 节点可以通过 `this.$refs.child.$el` 获取,然后使用 `getAttribute()` 方法获取自定义属性 `custom-attr` 的值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)