十八. vue中的自定义属性

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 Titletitle>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script type="text/javascript" src="./vue.js">script>
head>

<body>
    <div id="root">
        
        
        <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>

你可能感兴趣的:(vue2,vue)