lipengzhou/v-if实现.html

## v-if实现.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Vue 自定义指令模拟v-if</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #f40;
    }
  </style>
</head>

<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <input type="checkbox" v-model="seen">
    <div class="box" v-my-if="seen"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
  const myIf = {
    parentEl: null,
    commentEl: null,
    install(Vue, options) {
      const plugin = this
      Vue.directive('my-if', {
        inserted(el, binding) {
          plugin.parentEl = el.parentElement

          if (!binding.value) {
            plugin.commentEl = document.createComment(' ')
            plugin.parentEl.replaceChild(plugin.commentEl, el)
          }
        },
        update(el, binding) {
          if (binding.value) {
            plugin.parentEl.replaceChild(el, plugin.commentEl)
          } else {
            plugin.parentEl.replaceChild(plugin.commentEl, el)
          }
        }
      })
    }
  }

  Vue.use(myIf)

  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!',
      seen: false
    },
    methods: {}
  })
  </script>
</body>

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

	<head>
	<meta charset="UTF-8">
	<title>Vue 自定义指令模拟v-if</title>
	<style>
	.box {
	width: 100px;
	height: 100px;
	background-color: #f40;
	}
	</style>
	</head>

	<body>
	<div id="app">
	<h1>{{ message }}</h1>
	<input type="checkbox" v-model="seen">
	<div class="box" v-my-if="seen"></div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
	const myIf = {
	parentEl: null,
	commentEl: null,
	install(Vue, options) {
	const plugin = this
	Vue.directive('my-if', {
	inserted(el, binding) {
	plugin.parentEl = el.parentElement

	if (!binding.value) {
	plugin.commentEl = document.createComment(' ')
	plugin.parentEl.replaceChild(plugin.commentEl, el)
	}
	},
	update(el, binding) {
	if (binding.value) {
	plugin.parentEl.replaceChild(el, plugin.commentEl)
	} else {
	plugin.parentEl.replaceChild(plugin.commentEl, el)
	}
	}
	})
	}
	}

	Vue.use(myIf)

	const app = new Vue({
	el: '#app',
	data: {
	message: 'Hello Vue.js!',
	seen: false
	},
	methods: {}
	})
	</script>
	</body>

	</html>