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

前端-vue基础33-自定义指令用法

时间:2023-02-10 10:35:30浏览次数:42  
标签:el vue 自定义 33 binding value color Vue

前端-vue基础33-自定义指令用法_javascript

 前端-vue基础33-自定义指令用法_Vue_02

 

<!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'>
    </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: {
 
            }
        });
    </script>
</body>
 
</html>

前端-vue基础33-自定义指令用法_javascript_03

 

标签:el,vue,自定义,33,binding,value,color,Vue
From: https://blog.51cto.com/u_15460007/6048835

相关文章

  • 前端-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.代码,按需复制修改即可......
  • AMC1305L25QDWRQ1规格AMC3336QDWERQ1模数转换器 - ADC
    概述1、AMC1305隔离型Δ-Σ调制器是一款精密的Δ-Σ调制器,其输出与输入电路之间由一个抗磁干扰能力强的电容式双隔离势垒进行隔离。该势垒经认证可提供高达7000V峰......
  • Vue课程56-演示案例需求
     ......
  • Vue课程59-label的for属性
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="w......
  • Vue课程57-循环渲染表格行的数据
    代码部分<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"/> <metahttp-equiv="X-UA-Compatible"content="IE=edge"/> <metaname="viewpor......
  • Vue课程49-时间绑定-按键修饰符
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......