How to hide div using vue

This time I will show you how to use vue to hide divs, and what are the precautions for using vue to hide divs. The following is a practical case, let's take a look.

How to implement it simply?

1. Definitely add a click event listener to the document
2. When a click event occurs, determine whether the current object is clicked
We will implement it by combining this idea and instructions.

A brief introduction to vue instructions

An instruction definition object can provide the following hook functions (all optional):

1. bind: Called only once, when the instruction is bound to an element for the first time. One-time initialization settings can be performed here.

2. inserted: Called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document).

3. update: Called when the VNode of the component is updated, but may occur before its child VNode is updated. The value of the directive may or may not have changed. But you can ignore unnecessary template updates by comparing the values ​​before and after the update (see below for detailed hook function parameters).

4. componentUpdated: Called after the VNode of the component where the instruction is located and its sub-VNodes have all been updated.

5. unbind: Called only once, when the instruction is unbound from the element.

Next let’s take a look at the parameters of the hook function (i.e. el, binding, vnode and oldVnode).

Code implementation

Create the instruction object and put the analysis in the code

<template>
 <p>
 <p class="show" v-show="show" v-clickoutside="handleClose">
  显示
 </p>
 </p>
</template>
<script>
const clickoutside = {
 // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
  // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false;
  }
  // 判断指令中是否绑定了函数
      if (binding.expression) {
  // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e);
      }
 }
 // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler;
    document.addEventListener('click', documentHandler);
  },
  update() {},
  unbind(el, binding) {
 // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__);
    delete el.__vueClickOutside__;
  },
};
export default {
  name: 'HelloWorld',
  data() {
    return {
      show: true,
    };
  },
  directives: {clickoutside},
  methods: {
    handleClose(e) {
      this.show = false;
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.show {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

I believe I read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to operate Vue to make a proxy agent

How to use vue multi-page development and packaging

The above is the detailed content of How to hide div using vue. For more information, please follow other related articles on the PHP Chinese website!