\n```","suggestedAnswer":[{"@type":"Answer","text":"```html\n

Rendering DOM Vuejs

\n \n

User doesn't see directly the DOM

\n```"},{"@type":"Answer","text":"```html\n

Rendering DOM Vuejs

\n \n

\n```"},{"@type":"Answer","text":"```html\n

Rendering DOM Vuejs

\n \n

User doesn't see directly the DOM

\n```"},{"@type":"Answer","text":"```html\n

Rendering DOM Vuejs

\n \n

\n```"}],"acceptedAnswer":[{"@type":"Answer","text":"```html\n

Rendering DOM Vuejs

\n \n

User doesn't see directly the DOM

\n```"}]}}

Home>IT Tests>Questions>Write a Vue component that renders a title, a button and a notice.

Question from the Vue.js test

Write a Vue component that renders a title, a button and a notice.

Hard

What this component will generate in the DOM ?

<template>
  <div>
    <h1 v-if="isTitleShown">
      Rendering DOM Vuejs
    </h1>
    <button>
      <template v-if="isButtonActivated">
        Activate
      </template>
      <template v-else>
        Desactive
      </template>
    </button>
    <p v-show="isNoticeDisplayed">
      User doesn't see directly the DOM
    </p>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    return {
      isTitleShown: ref(true),
      isButtonActivated: ref(false),
      isNoticeDisplayed: ref(false)
    };
  }
});
</script>

Author: MathisStatus: Published(Update)Question passed 26 times

Edit

Community EvaluationsNo one has reviewed this question yet, be the first!