一般而言，我对前端有点陌生，尤其是vue.js。我试图制作一个包含5个元素的小型应用程序，每个元素实际上是从具有2个值的对象（名称和描述）中获取数据。同样，每个对象都在一个数组中。
默认情况下，名称显示为阻止，默认情况下，描述显示为无。
我希望应用程序在单击名称时显示阻止描述的内容。
这是完整的代码，您可以在Codepen上或在本地运行它，它将毫无问题地运行。您可以忽略body标签上方的所有内容。
<html>
<head>
<style>
*{margin: 0px; padding: 0px; font-family: sans-serif; list-style-type: none; }
body{background: #003366;}
#container{width: 1000px; margin: 100px auto;}
#elements{width: 100%;}
#elements li{display: inline-block; width: 40%; margin: 40px 5%; background: #FFF; color: #003366; box-shadow: 10px 10px 0px #222; user-select: none;}
#elements li h1,h3{padding: 10px 20px;}
#elements li h3{display: none;}
#elements li h1{cursor: pointer;}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="container">
<ul id='elements'>
<li v-for="eleObject in eleObjects">
<h1 v-on:click="expand" v-text="eleObject.name"></h1>
<h3 v-text="eleObject.description"></h3>
</li>
</ul>
</div>
</body>
<script>
let elementList = new Vue({
el: "#elements",
data:{
eleObjects:[
{name: "HTML5", description: "Used for front end web development more specifically for building the structure of a website"},
{name: "CSS3", description: "Used for giving style to the HTML elements, their positioning and overall look of the website"},
{name: "JavaScript 2015", description: "Used for event handling, functionality and dynamics of the website"},
{name: "Vue JS", description: "JavaScript framework for component based programming which is used to create more dynamic websites"},
{name: "Django.py", description: "Python framewrok used for the backend of the website aka storing data, displaying data templates etc..."}
]
},
methods:{
expand: function(){
}
}
});
</script>
</html>最佳答案
在mounted挂钩中，您需要通过添加一个名为eleObjects的新字段（最初是show）来更改false数组项，并使用v-show使用条件渲染，然后在单击特定项时将扩大
let elementList = new Vue({
el: "#elements",
data: {
eleObjects: [{
name: "HTML5",
description: "Used for front end web development more specifically for building the structure of a website"
},
{
name: "CSS3",
description: "Used for giving style to the HTML elements, their positioning and overall look of the website"
},
{
name: "JavaScript 2015",
description: "Used for event handling, functionality and dynamics of the website"
},
{
name: "Vue JS",
description: "JavaScript framework for component based programming which is used to create more dynamic websites"
},
{
name: "Django.py",
description: "Python framewrok used for the backend of the website aka storing data, displaying data templates etc..."
}
]
},
methods: {
expand: function(el, i) {
el.show = true;
this.$set(this.eleObjects, i, el);
}
},
mounted() {
this.eleObjects = this.eleObjects.map(e => {
let t = e;
e.show = false;
return t;
});
}
});* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
list-style-type: none;
}
body {
background: #003366;
}
#container {
width: 1000px;
margin: 100px auto;
}
#elements {
width: 100%;
}
#elements li {
display: inline-block;
width: 40%;
margin: 40px 5%;
background: #FFF;
color: #003366;
box-shadow: 10px 10px 0px #222;
user-select: none;
}
#elements li h1,
h3 {
padding: 10px 20px;
}
#elements li h3 {}
#elements li h1 {
cursor: pointer;
}<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<body>
<div id="container">
<ul id='elements'>
<li v-for="(eleObject,i) in eleObjects">
<h1 v-on:click="expand(eleObject,i)" v-text="eleObject.name"></h1>
<h3 v-text="eleObject.description" v-show="eleObject.show"></h3>
</li>
</ul>
</div>
</body>