Vue_1-13_自定义指令

最新推荐文章于 2022-05-10 16:48:27 发布

陪你去流浪_

最新推荐文章于 2022-05-10 16:48:27 发布

阅读量106

点赞数

本文链接：https://blog.csdn.net/jokerxiuka/article/details/118495149

版权

本文展示了如何在 Vue.js 中创建并使用自定义指令 `upper-text` 和 `lower-text`。通过这两个指令，可以实现文本内容的自动转换为大写或小写。示例中分别在两个 Vue 实例中应用了这些指令，一个在 `#app` 容器内，另一个在 `#app2` 容器内，用于演示指令的局部注册和使用。

摘要由CSDN通过智能技术生成

自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <p v-upper-text="msg"></p>
        <p v-lower-text="msg"></p>
    </div>
    <div id="app2">
        <p v-upper-text="msg"></p>
        <p v-lower-text="msg"></p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        Vue.directive('upper-text',function (el,binding) {
            console.log(el,binding);
            el.textContent = binding.value.toUpperCase()
        }),
        new Vue({
            el:'#app',
            data:{
                msg:'hElLo'
            },
            directives: {//注册局部指令，只在当前vm管理范围内有效
                // 'lower-text':function(el,binding){
                'lower-text'(el,binding){
                    el.textContent = binding.value.toLowerCase()
                }
            }
        })
        new Vue({
            el:'#app2',
            data:{
                msg:'hello HuZi'                
            }
        })
        //  1.注册全局指令 
        // el:指令属性所在的标签对象
        // binding：包含指令相信息的对象
        // Vue.directive('my-directive',function(el,binding){
        //     el.innerHTML = binding.value.toupperCase();
        // })
        // 2.注册局部指令
        // directives:{
        //     'my-directive':{
        //         bind(el,binding){
        //             el.innerHTML = binding.value.toupperCase()
        //         }
        //     }
        // }
        // 3.使用指令
        // v-my-directive='xxx'
    </script>
</body>
</html>