vue 学习笔记day13 vue的自定义指令

最新推荐文章于 2024-05-29 15:35:36 发布

桑丘紫言

最新推荐文章于 2024-05-29 15:35:36 发布

阅读量116

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_39209728/article/details/104576423

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一 vue的自定义指令
    系统指令  ---》v-if v-show v-...
    自定义
        v-zhangsan
        v-color
        全局
            // 注册一个全局自定义指令 `v-focus`
            Vue.directive('指令名称',function（el,binding）{})
        局部
            new Vue({
            el: "#app",
            data: {
                cl: "pink"
            },
            directives: { //局部自定义指令
                "color": function(el, binding) {
                    console.log(el, binding);
                    el.style[binding.name] = binding.value;
                },
                "date": function(el, binding) {
                    el.innerHTML = new Date().toLocaleString();
                }
            },

例子1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1 v-color="cl">111</h1>

    </div>

    <script src="../vue.js"></script>
    <script>
        //  全局自定义指令
        Vue.directive("color", function(el, binding) {
            console.log(el, binding);
            el.style[binding.name] = binding.value
        })
        new Vue({
            el: "#app",
            data: {
                cl: "red"
            },
            methods: {

            }

        })
    </script>
</body>

</html>

例子2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1 v-color="cl">111</h1>
        <p v-date>111</p>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                cl: "pink"
            },
            directives: { //局部自定义指令
                "color": function(el, binding) {
                    console.log(el, binding);
                    el.style[binding.name] = binding.value;
                },
                "date": function(el, binding) {
                    el.innerHTML = new Date().toLocaleString();
                }
            },
            methods: {

            }

        })
    </script>
</body>

</html>

例子3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1 v-format>1,2,3,10,15</h1>

    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {

            },
            directives: { //局部自定义指令
                "format": function(el, binding) {
                    console.log(el, binding);
                    var arr = el.innerText.split(",");
                    console.log(arr)
                    for (var i = 0; i < arr.length; i++) {
                        if (arr[i] < 10 ) {
                            arr[i] = "0" + arr[i]
                        }
                    }
                    el.innerText = arr.join(",")
                },
            },
            methods: {

            }

        })
    </script>
</body>

</html>

例子4

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1 v-date>1582963973795</h1>

    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {

            },
            directives: { //局部自定义指令
                "date": function(el, binding) {

                    var str = el.innerText.replace("/\s/g", "");
                    var date = new Date(parseInt(str));
                    el.innerText = date.toLocaleDateString();
                },
            },
            methods: {

            }

        })
    </script>
</body>

</html>

桑丘紫言

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 学习笔记day13 vue的自定义指令

一 vue的自定义指令系统指令 ---》v-if v-show v-... 自定义 v-zhangsan v-color 全局 // 注册一个全局自定义指令 `v-focus` Vue.directive('指令名称',function（el,binding）{}) ...
复制链接

扫一扫