Vue之自定义指令

原创于 2024-12-19 14:58:56 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

1、拿到指令所在标签

2、拿到指令传的值

3、操作dom

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue学习</title>
  <script src="../lib/vue2/vue.js"></script>

</head>

<body>
  <div id="app">
    正常值：<span v-text="n"></span><br />
    放大值：<span v-big="n"></span><br />
    <button @click="n++">+</button>
  </div>
  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false
    const vm = new Vue({
      data() {
        return {
          n: 1
        }
      },
      directives: {
        big(el, binding) {
          console.log(el, binding.value)
          el.innerHTML = binding.value * 10

        }
      }
    })

    vm.$mount('#app')
  </script>
</body>

</html>