我总体上对前端有点新,特别是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>
3 回答
在
mounted
钩子中,您需要通过添加名为show
的新字段来更改eleObjects
数组项目,该字段最初为false
并且您使用v-show
进行条件渲染,然后当您单击特定项目时它将被展开您可以在其他答案中阅读,可以添加属性以查看它是否可见 . 另一种方法是你可以检查css并根据它是
block
还是none
进行更改为了达到理想的行为,在对象上有一些属性可以很好地表明事物是否可见 .
从
v-for
循环中,您可以获取索引,并且相同的索引传递给expand
函数,因此您可以从方法访问单击的元素 .expand
方法应该是直截了当的,我们只想更新visible
点击元素的状态 .这是最后的演示:https://jsbin.com/jiduzoduri/1/edit?html,js,output