十八. vue中的自定义属性

1. 语法：直接在标签中用。格式：data-属性2. 如何获取自定义属性的值？event.target.dataset.radiusevent是函数第一个参数（默认传参，不用自己传）

这不比博人传燃？

8094人浏览 · 2022-03-25 17:35:02

这不比博人传燃？ · 2022-03-25 17:35:02 发布

1. 语法：

直接在标签中用。
格式：data-属性

2. 如何获取自定义属性的值？

event.target.dataset.属性名

event是函数第一个参数（默认传参，不用自己传），是事件对象
event.target：指的是触发事件的那个元素
event.target.dateset：获取标签的自定义属性和属性
event.target.dateset.属性名：准确获取属性的值

3. 注意事项

在标签中的自定义属性若是小驼峰命名方式，在methods中使用时都改为小写。
举例：

:data-helloWrold //自定义属性
event.target.dataset.helloworld //使用

3. 举例

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script type="text/javascript" src="./vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- <button @click="a">八嘎</button></button> -->
        <!-- <button @click="a($event)">八嘎</button></button> -->
        <button :data-a="22" @click="a($event,66)">八嘎</button></button>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                name: '',
            },
            methods: {
                // a(event) {
                //     // console.log(event.target);
                //     console.log(event);
                // }
                a(event, number) {
                    // console.log(event.target);
                    console.log(event, number);
                    console.log(event.target.dataset, number);
                    console.log(event.target.dataset.a, number);
                }
            }
        })
    </script>
</body>
</html>