<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="col-xs-12 col-sm-6">
<h1>全部會員</h1>
<input type="text" v-model="search">
<div v-for='person in people | filterBy search'>
<img :src="person.picture.thumbnail">
{{person.name.first}}{{person.name.last}}
<button @click='addPerson(person)'>加到列表</button>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<h1>選取會員</h1>
<div v-for='(id,person) in selectPeople'>
{{id}}
<img :src="person.picture.thumbnail">
{{person.name.first}}{{person.name.last}}
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
people:null,
search:'',
selectPeople:[]
},
created:function(){
this.getData();
},
methods:{
getData:function(){
// GET /someUrl
this.$http.get('https://api.randomuser.me/?results=50').then(response => {
// get body data
this.people = response.body.results;
}, response => {
// error callback
});
},
addPerson:function(person){
this.selectPeople.push(person);
}
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
全站熱搜
留言列表
伺服器架設 (1)
