Vue之v-if指令与v-show指令

 

一 App组件

 

<template>
    <section>
        <mongo :key="1" v-if="show"/>
        <mongo :key="2" v-show="show"/>
    </section>
</template>
<script>
import Mongo from "./mongo";

export default {
  name: "App",
  data() {
    return {
      show: false
    };
  },
  components: { Mongo }
};
</script>

 

二 Mongo组件

 

<template>
    <h4>芒果</h4>
</template>
<script>
export default {
    name:'Mongo'
}
</script>

 

三 App组件的渲染函数

 

var render = function () {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "section",
    [
      // 第一个Mongo组件
      _vm.show ?