<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖書館增加書</title>
<script src="js/vue.js"></script>
<style>
ul{
list-style: none;
width:100px;
height:auto;
}
.buttonstylelist{
width:80px;
height:30px;
border:1px solid blue;
color:#fff;
background: blue;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for = "todo in todos" v-bind:style="stylelist">
<span>{{todo.text}}</span>
</li>
</ul>
<input type="text" v-on:keyup.enter="addTodo" v-model="message"/>
<button v-on:click = "add" v-bind:class="buttonStyle">增加書籍</button>
<button v-on:click="remove" v-bind:class="buttonStyle">刪除</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
todos:[{text:'紅樓夢'},{text:'水滸傳'}],
message:'',
stylelist:{
height:'30px',
lineHeight:'30px',
border:'1px solid red',
textAlign:'center',
background:'pink',
color:'red'
},
buttonStyle:{
'buttonstylelist':true
}
},
methods:{
remove:function(index){
this.todos.splice(index,1)
},
addTodo:function(){
var text = this.message.trim();
if(text){
this.todos.push({text:text});
this.message=" ";
}
},
add:function(){
var text = this.message.trim();
if(text){
this.todos.push({text:text});
this.message=" ";
}
}
}
})
</script>
</body>
</html>
