var app = new Vue ({
el: '#app',
data: {
heading: 'VoidCanvas Online Library',
heading_Color:'headingColor',
booksFontSize:'booksFontSize',
author:'author',
searchString: '',
books: [
{
title: 'Elon Musk',
by:'Ashlee Vance',
url:'http://www.voidcanvas.com/'
},
{
title: 'Steve Jobs',
by:'George Llian',
url:'http://www.voidcanvas.com/'
},
{
title: 'Face of Facebook',
by: 'Sandip Paul',
url:'http://www.voidcanvas.com/'
},
{
title: 'Tim Cook',
by:'Andy Atkins',
url:'http://www.voidcanvas.com/'
},
{
title: 'Abdul Kalam',
by:'Arun Tiwari',
url:'http://www.voidcanvas.com/'
},
{
title: 'Story of Elon Musk',
by:'BP John',
url:'http://www.voidcanvas.com/'
},
{
title: 'Story of Bill Gates',
by:'Russel Crook',
url:'http://www.voidcanvas.com/'
},
{
title: 'Becoming Steve Jobs',
by:'Andrew Russel',
url:'http://www.voidcanvas.com/'
}
]
},
computed: {
filteredBooks: function () {
var books_array = this.books,
searchString = this.searchString;
if(!searchString) {
return books_array;
}
searchString = searchString.trim().toLowerCase();
books_array = books_array.filter(function(item) {
if(item.title.toLowerCase().indexOf(searchString) !== -1) {
return item;
}
});
return books_array;
}
}
});
<html>
<head>
<link rel="stylesheet" href="./cssfile.css">
</head>
<body>
<div id="app">
<b v-bind:class="heading_Color"> {{heading}} </b>
<input type="text" v-model="searchString" placeholder="search box" />
<div class="design">
<ul style="list-style: none;">
<li v-for="book in filteredBooks">
<a v-bind:href="book.url">{{book.title}} -by- {{book.by}}</a>
</li>
</ul>
</div>
</div>
<script src="./vue.js"></script>
<script src="./vueTry.js"></script>
</body>
</html>
body {
background-color: #dbd8d8
}
.headingColor {
color: purple;
margin-left: 120px;
}
input {
width: 300px;
margin-left: 80px;
}
.design {
width: 400px;
margin-left: 10px
}
.design a {
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
border: 3px solid white;
background: #FC756F;
color: #444;
text-decoration: none;
transition: all .2s ease-in-out;
}
.design a:hover {
background: #d6d4d4;
text-decoration: none;
transform: scale(1.1);
}
.design a:before {
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #FC756F;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
color: #FFF;
}