>技術鏈：html+css+js+vue+vue-resource >API接口：https://douban.uieee.com/v2/movie/top250 >實現效果：  >html代碼 ``` <div id="book"> <div> <input type="text" placeholder="請輸入書名" v-model="name" v-on:keydown.enter="search"> <button @click="search">搜索</button> </div> <div class="left"> <h1 id="title">{{ title }}</h1> <img id="img" v-bind:src="img_url"> <p id="author">{{ author }}</p> </div> <p id="about">{{ about }}</p> </div> ``` >js代碼 ``` new Vue({ el: "#book", data: { name: "", title: "", img_url: "", author: "", about: "" }, methods: { search: function(){ /* 動態搜索實現 */ var self = this; var name = this.name; var url = `https://douban.uieee.com/v2/book/search?q=${name}&cont=1` $.ajax({ type: 'get', url: url, dataType: 'jsonp', success(res){ self.handleData(res); } }) }, handleData: function(res){ this.title = res.books[0].title; this.img_url = res.books[0].images.small; this.about = res.books[0].summary; this.author = "作者：" + res.books[0].author; } } }) ``` ----- 整個項目以上傳至[github](https://github.com/MrXuxu/H5_demo/tree/master/Vue%E9%A1%B9%E7%9B%AE)