当前位置：网站首页>75-局部自定义指令——bind和update方法

75-局部自定义指令——bind和update方法

2022-07-19 05:05:00 【longfei815】

75-局部自定义指令——bind和update方法

这里通过directives指令实现。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>75-局部自定义指令——bind和update方法</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    p{
      width: 100px;
      height: 100px;
      background-color: #fcf;
    }
  </style>
</head>
<body>
  <div id='app'>
    <button @click="isShow=!isShow">按钮</button>
    <p v-myshow="isShow"></p>
  </div>  
  <script>
    new Vue({
      el:'#app',
      data:{
        isShow:false
      },
      // directives是指令的意思。
      directives:{
        myshow:{
          // 钩子函数特点: 一定时机下自动执行,不需要调用;钩子函数一般会有几个函数在一起.
          bind(el,binding){
              // 什么时候执行这里的代码?
              // 在v-myshow指令绑定到p标签身上的时候,执行这里的代码,只执行1次. 页面一刷新就绑定上去了
              // el 是这个被绑定的元素 
              // binding 是一个此次绑定的一些信息的对象  
              // binding.value 有用, 获取到isShow的值

              // 需求:页面一刷新,让盒子根据isShow的值,来进行显示或者隐藏
              console.log("bind", el, binding);
              // el.style.display = isShow的值 ? "block" : "none"
              el.style.display =  binding.value?"block":"none"
          },
          update(el,binding){
            // 什么时候执行这里的代码?
            // 被绑定上的标签的子节点发生变化的时候,执行这里的代码
            // v-myshow是p的子节点,所以,只要v-myshow的值发生变化,就会执行这里的代码

            // 点击之后,重新根据isShow的值做显示或者隐藏
            el.style.display = binding.value ? "block" : "none"

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

原网站

版权声明
本文为[longfei815]所创，转载请带上原文链接，感谢
https://blog.csdn.net/jolinoy/article/details/125681703

边栏推荐

猜你喜欢

随机推荐