Я новичок во внешнем интерфейсе в целом, особенно в vue.js. Я пытаюсь создать небольшое приложение, которое будет содержать 5 элементов, каждый элемент фактически получает данные от объекта с двумя значениями - именем и описанием. Также каждый объект находится в массиве.
Имя по умолчанию отображается как блокировка, а описание по умолчанию не отображается. Я хочу, чтобы приложение отображало описание для блокировки всякий раз, когда я нажимаю на имя. Вот весь код, вы можете запустить его на 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/[email protected]/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>