Javascript 如何使用vuejs从多个元素中定位特定的单击元素

一般来说，我对前端有点陌生，尤其是vue.js。我正在尝试制作一个包含5个元素的小应用程序，每个元素实际上是从一个具有2个值的对象获取数据-名称和描述。此外，每个对象都在一个数组中

默认情况下，名称显示为“块”，描述显示为“无”。 我希望应用程序在我单击名称时显示要阻止的描述。 这是完整的代码，您可以在codepen或本地运行，它将毫无问题地运行。可以忽略body标记上方的所有内容

*{边距：0px；填充：0px；字体系列：无衬线；列表样式类型：无；}
正文{背景：#003366；}
#容器{宽度：1000px；边距：100px自动；}
#元素{宽度：100%；}
#元素li{显示：内联块；宽度：40%；边距：40px 5%；背景：FFF；颜色：003366；框阴影：10px 10px 0px 222；用户选择：无；}
#元素LiH1，h3{填充：10px 20px；}
#元素li h3{显示：无；}
#元素li h1{游标：指针；}




让elementList=新建Vue({
el:“元素”，
数据：{
eleObjects：[
{名称：“HTML5”，描述：“用于前端web开发，更具体地说，用于构建网站结构”}，
{name:“CSS3”，description:“用于为HTML元素提供样式、它们的位置和网站的整体外观”}，
{名称：“JavaScript 2015”，描述：“用于网站的事件处理、功能和动态”}，
{名称：“Vue JS”，描述：“用于创建更多动态网站的基于组件编程的JavaScript框架”}，
{name:“Django.py”，description:“用于网站后端的Python framewrok，即存储数据、显示数据模板等…”
]
},
方法：{
展开：函数（）{
}
}
});

在

mounted

钩子中，您需要通过添加名为

show

的新字段来更改

eleObjects

数组项，该字段最初为

false

，并使用

v-show

使用条件渲染，然后当您单击特定项时，它将被展开

let elementList=new Vue({
el:“元素”，
数据：{
eleObjects：[{
名称：“HTML5”，
描述：“用于前端web开发，尤其是用于构建网站结构”
},
{
名称：“CSS3”，
描述：“用于为HTML元素提供样式、它们的位置和网站的整体外观”
},
{
名称：“JavaScript 2015”，
描述：“用于网站的事件处理、功能和动态”
},
{
名称：“Vue JS”，
描述：“用于基于组件编程的JavaScript框架，用于创建更多动态网站”
},
{
名称：“Django.py”，
描述：“用于网站后端的Python framewrok，也称为存储数据、显示数据模板等…”
}
]
},
方法：{
扩展：功能（el，i）{
el.show=true；
this.$set（this.eleObjects，i，el）；
}
},
安装的（）{
this.eleObjects=this.eleObjects.map（e=>{
设t=e；
e、 show=false；
返回t；
});
}
});
*{
边际：0px；
填充：0px；
字体系列：无衬线；
列表样式类型：无；
}
身体{
背景#003366；
}
#容器{
宽度：1000px；
保证金：100像素自动；
}
#元素{
宽度：100%；
}
#元素李{
显示：内联块；
宽度：40%；
利润率：40px5%；
背景：#FFF；
颜色：#003366；
盒影：10px 10px 0px#222；
用户选择：无；
}
#李h1,，
h3{
填充：10px 20px；
}
#元素li h3{}
#元素li h1{
光标：指针；
}





为了实现所需的行为，最好在对象上有一些属性来指示对象是否可见

eleObjects:[
    {name: "HTML5", description: "Used for front end web development more specifically for building the structure of a website", visible: false},
    {name: "CSS3", description: "Used for giving style to the HTML elements, their positioning and overall look of the website", visible:  false},
    {name: "JavaScript 2015", description: "Used for event handling, functionality and dynamics of the website", visible: false},
    {name: "Vue JS", description: "JavaScript framework for component based programming which is used to create more dynamic websites", visible: false},
    {name: "Django.py", description: "Python framewrok used for the backend of the website aka storing data, displaying data templates etc...", visible: false}
]

从
v-for
循环中，您可以获得索引，并将相同的索引传递给
expand
函数，这样您就可以从方法访问单击的元素

<li v-for="(eleObject, index) in eleObjects">
    <h1 @click="expand(index)" v-text="eleObject.name"></h1>
    <h3 v-show="eleObject.visible" v-text="eleObject.description"></h3>
</li>

这里是最后一个演示：
正如您在其他答案中所读到的，您可以添加一个属性来查看它是否可见。
另一种方法是，您可以检查css并根据它是
block
还是
none


let elementList=new Vue({
el:“元素”，
数据：{
eleObjects：[{
名称：“HTML5”，
描述：“用于前端web开发，尤其是用于构建网站结构”
},
{
名称：“CSS3”，
描述：“用于为HTML元素提供样式、它们的位置和网站的整体外观”
},
{
名称：“JavaScript 2015”，
描述：“用于网站的事件处理、功能和动态”
},
{
名称：“Vue JS”，
描述：“用于基于组件编程的JavaScript框架，用于创建更多动态网站”
},
{
名称：“Django.py”，
描述：“用于网站后端的Python framewrok，也称为存储数据、显示数据模板等…”
}
]
},
方法：{
扩展：函数（e）{
设h3Element=e.target.nextElementSi
expand: function(index){
   this.eleObjects[index].visible = !this.eleObjects[index].visible;
}