Vue 指令-自定义指令的简单示例。

最新推荐文章于 2023-07-26 11:55:36 发布

LuckXinXin

最新推荐文章于 2023-07-26 11:55:36 发布

阅读量130

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/LuckXinXin/article/details/104800192

版权

Vue 专栏收录该内容

165 篇文章 10 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 指令-自定义指令</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo">
  <p v-upper-text="msg"></p>
  <p v-lower-text="msg"></p>
</div>

<div id="demo2">
  <p v-upper-text="msg"></p>
  <p v-lower-text="msg"></p>
</div>
<script type="text/javascript">
  // 注册全局指令
  Vue.directive('upper-text', function (el, binding) {
    el.textContent = binding.value.toUpperCase()
  })


  new Vue({
    el: '#demo',
    data: {
      msg: 'I am LuckXinXin!'
    }, 
	// 局部指令
    directives: { 
      'lower-text'(el, binding){
        el.innerText = binding.value.toLowerCase()
      }
    }
  })

  new Vue({
    el: '#demo2',
    data: {
      msg: 'LuckXinXin!'
    }
  })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

大家可以自己尝试运行一下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LuckXinXin

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 指令-自定义指令的简单示例。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 指令-自定义指令</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"&g...
复制链接

扫一扫