当前位置：网站首页>77 global customization instruction

77 global customization instruction

2022-07-20 08:42:00 【longfei815】

77- Global custom instructions - adopt Vue.directive Set up .

The code is as follows ：

<!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>77- Global custom instructions </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 </button>
    <p v-myshow="isShow"></p>
  </div>  
  <script>

    Vue.directive("myshow", {  // directive It means instruction .
        bind(el, binding) {
          //  When to execute the code here ?
          //  stay v-myshow Instruction bound to p On the label , Execute the code here , Only execute 1 Time .  The page is bound as soon as it is refreshed 
          // el  It's this bound element  
          // binding  It is an object of some information bound this time   
          // binding.value  Useful ,  Get isShow Value 

          //  demand : As soon as the page is refreshed , Let the box according to isShow Value , To show or hide 
          console.log("bind", el, binding);
          // el.style.display = isShow Value  ? "block" : "none"
          el.style.display = binding.value ? "block" : "none"
        },
        update(el, binding) {
          //  When to execute the code here ?
          //  When the child node of the bound label changes , Execute the code here 
          // v-myshow yes p Child nodes of , therefore , as long as v-myshow The value of has changed , Will execute the code here 

          //  After clicking , According to again isShow Show or hide the value of 
          el.style.display = binding.value ? "block" : "none"
        }
    })

    new Vue({
      el:'#app',
      data:{
        isShow:false
      }
    })
  </script>
</body>
</html>

原网站

版权声明
本文为[longfei815]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190503318437.html

边栏推荐

猜你喜欢

随机推荐