Auto Commit

src/App.vue

 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+// import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
   <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+    <!-- <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> -->
 
     <div class="wrapper">
       <HelloWorld msg="You did it!" />

src/components/HelloWorld.vue

-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
 <template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
+    <div class="box2">
+        <ul>
+            <li v-for="(item,index) in items":key="index" @click="selectItem(index)" :class="{selected:selectedIndex===index}">
+                {{item.id}}
+                {{item.text}}
+                {{item.path}}
+                {{item.password}}
+                </li>
+        </ul>
     </div>
 </template>
 
+<script>
+    export default{
+        name:"  Hollowrld",
+        data(){
+            return{
+                items:[
+                    {id:"1",text:'item2',path:"/route" ,password:"123456"},
+                    {id:"2",text:'item2',path:"/route",password:"456789"},
+                    { id:"3",text:'item2',path:"/route", password:"457812"}
+                ],
+                selectedIndex:null
+            };
+        },
+        methods:{
+            selectItem(index){
+                this.selectedIndex=index;
+                console.log(`selected item: ${this.items[index]}` );
+            }
+        }
+    }
+</script>
+
 <style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
+.box2 {
+  border: 1px solid #ccc;
+  padding: 10px;
 }
 
-h3 {
-  font-size: 1.2rem;
+.box2 ul {
+  list-style-type: none;
+  padding: 0;
 }
 
-.greetings h1,
-.greetings h3 {
-  text-align: center;
+.box2 li {
+  cursor: pointer;
+  padding: 5px;
+  margin-bottom: 5px;
+  background-color: #f9f9f9;
 }
 
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
+.box2 li.selected {
+  background-color: #ddd;
+  font-weight: bold;
 }
 </style>