你知道v-show吗前几天去面试，到了面试公司楼下的时候，突然一股妖风吹来，突然感到来自灵魂的颤抖。心里顿时升起不好的预

前言

前几天去面试，到了面试公司楼下的时候，突然一股妖风吹来，突然感到来自灵魂的颤抖。心里顿时升起不好的预感（太凉了）。他问我知道v-show吗？我笑了笑。由于我口才不好然后给他撸了一段代码说明。

简单实现

html结构

<!-- 定义两个按钮，用来改变数据 -->   
  <button onclick="showClick()">v-show显示</button>  
  <button onclick="hideClick()">v-show隐藏</button>

  <div id="v-show">我是v-show</div>

首先定义数据用于控制元素显示与隐藏

 let data = {isShow: false}

用Object.defineProperty()实现数据的劫持，让我们可以在数据变化的时候做一些操作

function observe() {   
    Object.defineProperty(data, 'isShow', {     
       configurable: true,    
       enumerable: true,       
       set: function (val) { //如果isShow的值为true  就调用showDiv方法  显示元素  
              if (val === true) {
                 showDiv() 
                 } else { //否则  就调用hideDiv方法  隐藏元素 
                   hideDiv()         
                 }
        }
})
}  
 observe()

showDiv函数改变元素display属性的值为block

function showDiv() { 
  let div = document.querySelector('#v-show')
   div.style.display = 'block'
}

hideDiv函数改变元素display属性的值为none

function hideDiv() {   
   let div = document.querySelector('#v-show')  
   div.style.display = 'none'
}

最后是按钮click事件的处理函数（改变isShow的值）

function showClick() {   
 data.isShow = true
}

function hideClick() {   
 data.isShow = false
}

完整代码如下

<!DOCTYPE html>
<html lang="en">
<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></title>
</head>
<body>  
  <!-- 定义两个按钮，用来改变数据 -->  
  <button onclick="showClick()">v-show显示</button>   
  <button onclick="hideClick()">v-show隐藏</button>   
  <div id="v-show">我是v-show</div>
</body>
</html>
<script>   
 //定义数据   
 let data = {  isShow: false }   
 //劫持数据 
 function observe() {  
      Object.defineProperty(data, 'isShow', {   
        configurable: true,        
        enumerable: true,        
        set: function ( val) { //如果isShow的值为true  就调用showDiv方法  显示元素
                if (val === true) {
                    showDiv() 
               } else { //否则  就调用hideDiv方法  隐藏元素                   
                    hideDiv()     
           }     
      }      
  })  
  } 
   observe() 
   //改变元素display属性的值为block  
 function showDiv() { 
   let div = document.querySelector('#v-show')        
   div.style.display = 'block'   
 }   
 //改变元素display属性的值为none    
function hideDiv() {
  let div = document.querySelector('#v-show')      
  div.style.display = 'none'   
}    
//改变数据值  
function showClick() {
  data.isShow = true
}   
 function hideClick() {    
    data.isShow = false  
 }
</script>

总结

其实v-show的实现就这么简单，关键点就是数据的劫持，然后在数据变化的时候改变元素的display属性值就好了。

好了，到了这里，我相信我们实现v-if等其他指令也就不难了。小伙伴可以自己去试试其他指令的实现。

由于本人实力有限，不对之处，欢迎指正