Consider the following Vue application with markup “index.html” and javascript file “app.js”. index.html: .booked { background-color: red; } {{seat.seatNo}} app.js: new Vue({ el: '#app', data: { seats: [ { seatNo: 1, isBooked: false }, { seatNo: 2, isBooked: true }, { seatNo: 3, isBooked: true }, ], }, }) Suppose the application is running on ‘ http://localhost:8080 ’. What will be the background colour of seat with seatNo 1 and 2, respectively, when the user visits the home page of the application (Assume the default background colour of button to be white)?

Modern Application Development II · End Term · 11 Dec 2022 · September 2022 term · Set ETD1-2

Question 12: Consider the following Vue application with markup “inde…

Question 12

+3 marksOne correct option

Consider the following Vue application with markup “index.html” and javascript file “app.js”.

index.html:

html

1<head>
2  <style>
3    .booked {
4      background-color: red;
5    }
6  </style>
7</head>
8<body>
9  <div id="app">
10    <button :class="{booked:seat.isBooked}" v-for="seat in seats">
11      {{seat.seatNo}}
12    </button>
13  </div>
14  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
15  <script src="app.js"></script>
16</body>

app.js:

javascript

1new Vue({
2  el: '#app',
3  data: {
4    seats: [
5      { seatNo: 1, isBooked: false },
6      { seatNo: 2, isBooked: true },
7      { seatNo: 3, isBooked: true },
8    ],
9  },
10})

Suppose the application is running on ‘http://localhost:8080’. What will be the background colour of seat with seatNo 1 and 2, respectively, when the user visits the home page of the application (Assume the default background colour of button to be white)?

A
Red, Red
B
Red, White
C
White, White
D
White, Red

Show answer

Correct answer

D
White, Red

See the whole paper Take it as a mock test

Question 12 of 32 in the IIT Madras BS Modern Application Development II (MAD 2) End Term paper sat on 11 Dec 2022, in the September 2022 term (IIT M DIPLOMA AN1 EXAM ETD1 11 Dec 2022). It carries 3 marks.

Question 12: Consider the following Vue application with markup “inde…

Question 12

More questions from this paper