<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vuev2.5.21.js"></script> <style> ul{ width: 200px; border: 1px solid red; } li{ width: 100px; height: 30px; border: 1px solid black; margin: 20px; } </style> </head> <body> <div id="app"> <ul v-for="(item,index) in list" :key="item.id" ref="ul" :data-index="index"> <a href="javascript:void(0)" @click="fold(index)">切换</a> <li v-if="item.selected">你好 世界</li> <li v-else>{{item.name}}</li> </ul> </div> <script> var vm = new Vue({ el:"#app", data:{ list:[ { id:0, name:"hello world", selected:true,//后台的值 }, { id:1, name:"hello world", selected:true,//后台的值 }, { id:2, name:"hello world", selected:true,//后台的值 }, { id:3, name:"hello world", selected:true,//后台的值 } ] }, methods:{ fold(index){ for(let i = 0; i<this.list.length;i++){ let key = JSON.parse(this.$refs.ul[i].dataset.index); if(key === index){ this.list[i].selected =!this.list[i].selected ; } } }, } }) </script> </body> </html>
原文地址:https://www.cnblogs.com/tuziling/p/10699457.html
时间: 2024-10-04 03:46:56