首页 > 其他分享 >前端-vue基础34-自定义指令局部用法

前端-vue基础34-自定义指令局部用法

时间:2023-02-10 10:36:48浏览次数:42  
标签:function el vue 自定义 color binding value 34

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 
    </style>
</head>
 
<body>
    <div id="app">
        <input type="text" v-color='msg'>
        <input type="text" v-focus>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script>
        /*   Vue.directive('color', {
                            bind: function(el, binding) {
                                //根据参数的指令设置背景色
                                console.log(binding.value.color);
                                el.style.backgroundColor = binding.value.color;
                            }
                        }); */
        var vm = new Vue({
            //绑定的标签
            el: '#app',
            //自定义按键修饰符
            data: {
                msg: {
                    color: 'pink'
                }
            },
            methods: {
 
            },
            directives: {
                color: {
                    bind: function(el, binding) {
                        //根据参数的指令设置背景色
                        console.log(binding.value.color);
                        el.style.backgroundColor = binding.value.color;
                    }
                },
                focus: {
                    inserted: function(el) {
                        el.focus();
                    }
                }
            }
        });
    </script>
</body>
 
</html>

前端-vue基础34-自定义指令局部用法_背景色

 

标签:function,el,vue,自定义,color,binding,value,34
From: https://blog.51cto.com/u_15460007/6048831

相关文章

  • 前端-vue基础36-计算属性和方法的区别
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><titl......
  • 前端-vue基础29-表单操作1
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Do......
  • 前端-vue基础39-过滤器
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><t......
  • 前端-vue基础31-表单域修饰符
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><titl......
  • 前端-vue基础33-自定义指令用法
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><t......
  • 前端-vue基础28-vue常用特性
      ......
  • vue 防抖节流器
    节流器:在一定时间内频繁的触发函数只会执行一次应用场景:我这里有一个图表需要在窗口改变大小的时候重绘图表的大小,但是窗口改变大小的事件过于频繁,需要增加一个节流器来进......
  • vue3-使用百度地图遇到的坑-地图实例化
    1、创建地图实例    原因:在使用vue3为了只定义一次地图实例,在所有方法中使用,直接使用如下定义方式:setup(){constdata=reactive({bmap:null,})......
  • docker搭建vue+nginx部署
    Vue+nginx部署1.首先安装ningx镜像 2.将nginx关键目录映射到本机  首先在本机创建nginx的文件存储目录       www:nginx存储网站网页的目录......
  • vue3实现单页crud
    1.介绍主要实现单页curd,包含分页、新增、修改、删除、批量删除、条件搜索、表单校验。导入和导出暂未实现。、本文章只是学习过程。仅供参考。2.代码,按需复制修改即可......