Scribd
Upload
4 views3 pages

Appvue Codes

The document outlines a Vue.js application that displays a list of students with their details and courses. It includes components for managing the display of student information and toggling the visibility of their courses. The main entry point is defined in 'Main.js' and the HTML structure is provided in 'index.html'.

Uploaded by

mromain140
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views3 pages

Appvue Codes

The document outlines a Vue.js application that displays a list of students with their details and courses. It includes components for managing the display of student information and toggling the visibility of their courses. The main entry point is defined in 'Main.js' and the HTML structure is provided in 'index.html'.

Uploaded by

mromain140
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

App.

vue

<script setup>

import HelloWorld from './components/HelloWorld.vue'

import TheWelcome from './components/TheWelcome.vue'

</script>

<template>

<div id="app">

<h1>Student List</h1>

<ul>

<li v-for="(student, index) in students" :key="index">

<h3>{{ student.name }} - Level: {{ student.level }} - Major: {{ student.major }}</h3>

<button @click="toggleCourses(index)">

{{ student.showCourses ? "Hide Courses" : "Show Courses" }}

</button>

<ul v-if="student.showCourses">

<li v-for="(course, i) in student.courses" :key="i">{{ course }}</li>

</ul>

</li>

</ul>

</div>

</template>

<script>

export default {

data() {

return {
students: [

{ name: "Alice", level: "Senior", major: "Computer Science", courses: ["Vue.js",


"JavaScript"], showCourses: false },

{ name: "Bob", level: "Junior", major: "Mathematics", courses: ["Algebra", "Statistics"],


showCourses: false },

{ name: "Charlie", level: "Sophomore", major: "Physics", courses: ["Quantum Mechanics",


"Electromagnetism"], showCourses: false }

};

},

methods: {

toggleCourses(index) {

this.students[index].showCourses = !this.students[index].showCourses;

};

</script>

<style scoped>

#app{

background-color: rgb(245, 137, 137);

padding: 20px;

border-radius: 20px;

</style>

Main.js

import './assets/main.css'

import { createApp } from 'vue'


import App from './App.vue'

createApp(App).mount('#app')

index.html

<!DOCTYPE html>

<html lang="">

<head>

<meta charset="UTF-8">

<link rel="icon" href="/favicon.ico">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Vite App</title>

</head>

<body>

<div id="app"></div>

<script type="module" src="/src/main.js"></script>

</body>

</html>

You might also like