naive-ui/demo/documentation/components/tabs/enUS/displayDirective.md

# Display Directive
You can set tab-panel's display directive to `if` or `show`. When use show, the tab-panel's content won't be reset after tab changes.
```html
<n-tabs v-model="tab">
  <n-tab-pane name="show" display-directive="show" label="show">
    <show-input />
  </n-tab-pane>
  <n-tab-pane name="if" display-directive="if" label="if">
    <if-input />
  </n-tab-pane>
</n-tabs>
```
```js
const showInput = {
  data () {
    return {
      value: ''
    }
  },
  render (h) {
    return h('n-input', {
      props: {
        placeholder: 'My content won\'t be reset',
        value: this.value
      },
      on: {
        input: v => {
          this.value = v
        }
      }
    })
  }
}

const ifInput = {
  data () {
    return {
      value: ''
    }
  },
  render (h) {
    return h('n-input', {
      props: {
        placeholder: 'My content will be reset',
        value: this.value
      },
      on: {
        input: v => {
          this.value = v
        }
      }
    })
  }
}


export default {
  components: {
    showInput,
    ifInput
  },
  data () {
    return {
      tab: 'show',
      value2: ''
    }
  }
}
```