将活动元素移动到vue.js中的收藏夹页面[关闭]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将活动元素移动到vue.js中的收藏夹页面[关闭]相关的知识，希望对你有一定的参考价值。
我创建了一个包含最佳书籍的清单。每本书都有一个“喜欢”图标。我想单击后，该图标会更改颜色，并且现在可以按“您的收藏夹”提供这本书。但实际上我不知道如何以“我的最爱”展示这本书。我是否需要一些特殊的“ id”或是否需要检查鞭书？也许有人可以提示我此功能的逻辑。我正在使用vue.js。
答案
new Vue(
el: "#app",
data:
Books: ['Book1','Book2','Book3'],
Favorites: ['Book1']
,
methods:
addToFav(book)
this.Favorites.push(book)
,
removeBook(book)
let index = this.Favorites.indexOf(book)
this.Favorites.splice(index, 1)
)body
background: #20262E;
padding: 20px;
font-family: Helvetica;
#app
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<hr>
Books:
<div v-for="book in Books">book<button @click="addToFav(book)">Favorite</button></div>
<hr>
Favorites:
<div v-for="book in Favorites">book<button @click="removeBook(book)">Remove</button></div>
<hr>
</div>以上是关于将活动元素移动到vue.js中的收藏夹页面[关闭]的主要内容，如果未能解决你的问题，请参考以下文章