自定义指令（）

最新推荐文章于 2024-08-29 11:24:16 发布

刘家奕_

最新推荐文章于 2024-08-29 11:24:16 发布

阅读量92

点赞数

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

本文链接：https://blog.csdn.net/m0_62387059/article/details/125783854

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍如何在Vue中创建一个名为v-big的自定义指令，该指令的功能是将绑定的数值放大10倍。通过实例代码展示了如何在Vue组件中定义并使用这个指令，以达到与v-text指令类似的效果，但提供了数值放大的额外功能。

摘要由CSDN通过智能技术生成

（1）函数式

需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

接下来我们就来写下这个自定义的指令吧

  <body>
    <!--准备好一个容器-->
    <div id="root">
      <h2>当前的n值为<span v-text="n"></span></h2>
      <h2>放大后的n值为<span v-big="n"></span></h2>
    </div>

    <script>
      Vue.config.productionTip = false; //阻止 vue在启动时生成生产提示。
      const x = new Vue({
        el: "#root",
        data: {
          n: 10,
        },
        directives: {
          big(element, binding) {
            element.innerText = binding.value * 10;
          },
        },
      });
    </script>
  </body>