<template>
    <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>
.box2 {
  border: 1px solid #ccc;
  padding: 10px;
}

.box2 ul {
  list-style-type: none;
  padding: 0;
}

.box2 li {
  cursor: pointer;
  padding: 5px;
  margin-bottom: 5px;
  background-color: #f9f9f9;
}

.box2 li.selected {
  background-color: #ddd;
  font-weight: bold;
}
</style>
