Vue学习笔记31--自定义指令--函数式

Vue学习笔记-自定义指令

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义指令</title>
  <!-- js阻塞 -->
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
  <div id="root">
    <h3>
      自定义指令：<br>
    </h3>
    <hr>
    <h3>当前的n值是:<span v-text="n"> </h3>
    <h3>放大10倍n值是:<span v-big="n"> </h3>
    <button @click="n++">n++</button>

  </div>
</body>

</html>
<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      name: 'v-text 学习笔记',
      n: 1,
    },
    //自定义指令
    directives: {
      // 函数式写法
      // big函数何时被调用==》
      // 1.指令与元素成功绑定时被调用 
      // 2.指令所在的模版被重新解析时，被调用
      big (element, binding) {
        element.innerText = binding.value * 10
        console.log('element', binding.value)
      }

    }

  })
</script>

posted on 2024-03-01 15:38 sunwugang 阅读(9) 评论(0) 收藏举报

刷新页面返回顶部

欢迎莅临 SUN WU GANG 的园子！！！

公告