vue---自定义指令

局部自定义指令

html 复制代码
  <div id='app'>
    原数据: <span v-text="num"></span>
    放大十倍的数据<span v-big="num"></span>
  </div>
javascript 复制代码
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        num: 1
      },
      directives: {
        big: {
          bind(el, binding) {
            console.log(el, binding)
            el.innerText = binding.value * 10
          },
          inserted(el, binding, vnode) {
            el.innerText = binding.value * 10
          },
          update(el, binding, vnode, oldVnode) {
            el.innerText = binding.value * 10
          },
        }
      }
    })
  </script>



全局自定义指令

javascript 复制代码
    Vue.directive('big', {
      bind(el, binding, vnode) { el.innerText = binding.value * 10 },
      inserted(el, binding, vnode) { el.innerText = binding.value * 10 },
      update(el, binding, vnode, oldVnode) { el.innerText = binding.value * 10 }
    });
相关推荐
胡西风_foxww2 分钟前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_748254883 分钟前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
星就前端叭1 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234521 小时前
前端Vue3字体优化三部曲(webFont、font-spider、spa-font-spider-webpack-plugin)
前端·webpack·node.js
Web阿成1 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript
噢,我明白了1 小时前
同源策略:为什么XMLHttpRequest不能跨域请求资源?
javascript·跨域
sanguine__2 小时前
APIs-day2
javascript·css·css3
苹果醋32 小时前
Golang的文件加密工具
运维·vue.js·spring boot·nginx·课程设计
jwensh2 小时前
【Jenkins】Declarative和Scripted两种脚本模式有什么具体的区别
运维·前端·jenkins
关你西红柿子2 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv