vue指令

最新推荐文章于 2024-03-08 19:18:48 发布

你的美，让我痴迷

最新推荐文章于 2024-03-08 19:18:48 发布

阅读量215

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45932157/article/details/122954498

版权

Vue.js 指令自定义指令文本转换 v-cloak

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <style>
        [v-cloak]{
          display: none;
        }
    </style>
  <script  src="../tool/vue.js"></script>
</head>
<body>
   <div  id="app">
     <p  ref="content">atguigt.com</p>
     <button  @click="hint">提示</button>
       <p  v-cloak>{{msg}}</p>
      <div>
          <p  v-upper-text="msg2"></p>
          <p  v-lower-text="msg2"></p>
      </div>
   </div>
<script  type="text/javascript"  >
    /*
    * 定义全局指令
    * el:指令属性所在的标签对象
    * binding :包含指令相关数据的对象
    * */
    Vue.directive('upper-text',function (el,binding) {
        console.log(el,binding);
        el.textContent=binding.value.toUpperCase();
    })
  var   vm=new  Vue({
    el:'#app',
    data:{
        msg:'血虚',
        msg2:'I  love   you'
    },
      //内部指令
      directives:{
       'lower-text':function (el,binding) {
              console.log(el,binding);
              el.textContent=binding.value.toLowerCase();
          }
      },
    methods:{
        hint(){
            alert(this.$refs.content.textContent);
        }

    }
   })
</script>
</body>
</html>