div 标签上 绑定 data-type 点击时 怎么获取到 data-type 值 代码是咧
时间: 2023-11-28 22:47:48 浏览: 29
你可以使用 JavaScript 中的 `getAttribute` 方法来获取 `data-type` 属性的值,具体代码如下所示:
HTML 代码:
```html
<div data-type="example">点击我</div>
```
JavaScript 代码:
```javascript
const divElement = document.querySelector('div');
divElement.addEventListener('click', function() {
const dataType = divElement.getAttribute('data-type');
console.log(dataType); // 输出:example
});
```
在上面的代码中,我们首先使用 `document.querySelector` 方法获取到 `div` 元素,并且给它添加了一个点击事件。当点击 `div` 元素时,我们使用 `getAttribute` 方法获取到 `data-type` 属性的值,并且将它打印到控制台中。
相关问题
el-date-picker属性type="daterange"绑定2个字段值
你可以使用`v-model`指令来绑定两个字段值。下面是一个示例代码:
```html
<template>
<div>
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
dateRange: [] // 存储开始日期和结束日期的数组
};
}
};
</script>
```
在上面的代码中,我们使用了`v-model`指令将`dateRange`数组与`el-date-picker`组件进行双向绑定。`dateRange`数组中的第一个元素将保存开始日期,第二个元素将保存结束日期。你可以通过访问`dateRange`数组来获取所选日期范围的值。
请注意,`type`属性设置为`daterange`,`range-separator`属性设置为日期范围的分隔符,`start-placeholder`和`end-placeholder`属性设置了开始日期和结束日期的占位符文本。
希望能对你有所帮助!如果有其他问题,请随时提问。
Checkbox上用id值绑定v-model
是的,可以使用id值来绑定v-model。这样做的好处是,在处理表单数据时,可以通过id值来获取被选中的复选框的值,而不必遍历整个checkbox列表。下面是一个示例:
```html
<template>
<div>
<label for="checkbox1">选项1:</label>
<input type="checkbox" id="checkbox1" v-model="checkboxValues[0]">
<br>
<label for="checkbox2">选项2:</label>
<input type="checkbox" id="checkbox2" v-model="checkboxValues[1]">
<br>
<label for="checkbox3">选项3:</label>
<input type="checkbox" id="checkbox3" v-model="checkboxValues[2]">
</div>
</template>
<script>
export default {
data() {
return {
checkboxValues: [false, false, false]
}
}
}
</script>
```
在上面的示例中,我们使用id值来绑定v-model,然后将checkbox的值存储在一个数组中。当用户勾选或取消勾选复选框时,checkboxValues数组中对应的值也会相应地改变。这样,我们就可以通过checkboxValues数组来获取被选中的复选框的值了。