vue自定义指令和动画transition

最新推荐文章于 2024-05-23 19:22:50 发布

艺术就是派大星220

最新推荐文章于 2024-05-23 19:22:50 发布

阅读量241

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Rossbort/article/details/120385663

版权

自定义指令：

<body>
    <div id="app">
        <h1 v-color123='col' v-permission='1'>{
  {name}}</h1>
        <div v-color123>{
  {name|money}}</div>
        <qqq></qqq>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    // 我们自己定义了一个全局的 指令  v-color
    // 注意：过滤器和自定义指令对应的回调函数中的this不是当前实例；
    Vue.directive('color123',function(el,obj){
      // 模板中只要使用一次 v-color  这个函数就会执行一次； 
      console.log(arguments)
      el.style.color = obj.value || 'blue'
    })
    Vue.directive('permission',function(el,obj){
      if(obj.value>10){
        el.style.display = 'block'
      }else{
        el.style.display = 'none'
      }
    })
    Vue.filter('money',function(val){
      // 全局的  任何组件都能调

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

艺术就是派大星220

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue自定义指令和动画transition

<body> <div id="app"> <h1 v-color123='col' v-permission='1'>{{name}}</h1> <div v-color123>{{name|money}}</div> <qqq></qqq> </div></body></html><scri...
复制链接

扫一扫