{{ item.title }}
{{ item.casts[0].name }}
{{ item.casts[1].name }}
資訊專欄INFORMATION COLUMN
摘要：概念圖實(shí)現(xiàn)功能電影列表頁(yè)數(shù)據(jù)為動(dòng)態(tài)獲取服務(wù)器數(shù)據(jù)點(diǎn)擊某個(gè)電影后跳轉(zhuǎn)到電影詳情頁(yè)數(shù)據(jù)為根據(jù)點(diǎn)擊的參數(shù)去服務(wù)器請(qǐng)求對(duì)應(yīng)數(shù)據(jù)回來(lái)填充到頁(yè)面顯示給用戶效果圖電影列表頁(yè)電影詳情頁(yè)思路及重點(diǎn)電影列表的每一項(xiàng)是從服務(wù)器獲取數(shù)據(jù)然后循環(huán)輸出到頁(yè)面的點(diǎn)擊電影
概念圖 實(shí)現(xiàn)功能:
電影列表頁(yè),數(shù)據(jù)為動(dòng)態(tài)獲取服務(wù)器數(shù)據(jù),點(diǎn)擊某個(gè)電影后跳轉(zhuǎn)到電影詳情頁(yè),數(shù)據(jù)為根據(jù)點(diǎn)擊的參數(shù)去服務(wù)器請(qǐng)求對(duì)應(yīng)數(shù)據(jù)回來(lái)填充到頁(yè)面顯示給用戶
效果圖 電影列表頁(yè) 電影詳情頁(yè) 思路及重點(diǎn)電影列表的每一項(xiàng)是從服務(wù)器獲取數(shù)據(jù)然后循環(huán)輸出到頁(yè)面的,點(diǎn)擊電影列表某一電影時(shí),要傳這一項(xiàng)的參數(shù)到window.location.href,關(guān)鍵點(diǎn)就是給點(diǎn)擊函數(shù)一個(gè)實(shí)參,比如這里的cctz(item.id),item.id就是實(shí)參,
在函數(shù)的定義里寫(xiě)形參,比如這里的canshu:
cctz?(canshu)?{?
????var?url?=?"詳情頁(yè).html"?+?"?id="?+?escape(canshu);
????window.open(url);
}
清單(過(guò)程)
1. 電影列表頁(yè),ajax獲取服務(wù)器數(shù)據(jù),循環(huán)輸出到頁(yè)面
2.寫(xiě)點(diǎn)擊事件函數(shù)cctz(),當(dāng)用戶點(diǎn)擊某個(gè)電影時(shí),往cctz()里傳入實(shí)參item.id,即cctz(item.id),觸發(fā)js里的cctz函數(shù),
**cctz函數(shù)使用open方法操控location.href使得頁(yè)面跳轉(zhuǎn),并在href末尾追加參數(shù)字符串.**
3.詳情頁(yè)如何取得參數(shù)?? 是這樣:從location.secrch拿到一段來(lái)自前一個(gè)頁(yè)面?zhèn)鬟f的參數(shù)字符串,并將這段參數(shù)字符串處理成一個(gè)鍵值對(duì)的對(duì)象obj
4.這時(shí)候obj.id就是參數(shù),就取得了參數(shù),再以這個(gè)參數(shù)去向服務(wù)器請(qǐng)求對(duì)應(yīng)的數(shù)據(jù).使用jq的ajax請(qǐng)求,以這個(gè)obj.id參數(shù)去向服務(wù)器請(qǐng)求對(duì)應(yīng)的數(shù)據(jù),把數(shù)據(jù)顯示到頁(yè)面
5.在頁(yè)面中輸出數(shù)據(jù)就行了
代碼//index.html
我的電影
我的電影
{{ item.title }}
{{ item.casts[0].name }}
{{ item.casts[1].name }}
//詳情頁(yè).html
電影詳情頁(yè)
電影詳情頁(yè)
{{ vueData.title }}
主演: {{ vueData.casts[0].name }} , {{ vueData.casts[1].name }}
導(dǎo)演: {{ vueData.directors[0].name }}
簡(jiǎn)介: {{ vueData.summary }}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95787.html
摘要：傳值與傳參是兩塊東西概念圖原理傳參的原理主要在于也有是的屬性是的屬性用來(lái)儲(chǔ)存數(shù)據(jù)的鍵值對(duì)對(duì)象形式儲(chǔ)存很多屬性鍵值對(duì)屬性屬性值在里面清單通過(guò)瀏覽器插件開(kāi)發(fā)者工具插件可以看的到屬性內(nèi)部的具體數(shù)據(jù)可以說(shuō)于是一個(gè)中間容器用來(lái)容納參數(shù)是鍵值對(duì)的方式這 vue傳值 與 vue傳參是兩塊東西 概念圖 showImg(https://segmentfault.com/img/remote/146000...
摘要：具體用法其中表示數(shù)組元素的值，表示數(shù)組元素的下標(biāo)，表示包含該元素的數(shù)組。這里采用隨機(jī)函數(shù)來(lái)獲取數(shù)組的下標(biāo)，函數(shù)是獲取之間的數(shù)，函數(shù)是向下取整，這樣就可以隨機(jī)獲取相應(yīng)的下標(biāo)數(shù)。小程序中的模板就很好地幫我們解決了這個(gè)問(wèn)題，并通過(guò)屬性來(lái)實(shí)現(xiàn)調(diào)用。 在微信小程序的開(kāi)發(fā)過(guò)程中，當(dāng)你想要實(shí)現(xiàn)不同頁(yè)面間的數(shù)據(jù)綁定，卻為此抓耳饒腮時(shí)，不妨讓微信小程序與filter 來(lái)一場(chǎng)完美的邂逅，相信會(huì)給你帶來(lái)別樣...
摘要：該內(nèi)的內(nèi)容會(huì)根據(jù)路由的變化而變化。配置，用來(lái)定義路由規(guī)則。由此我們就需要另一個(gè)第三方路由模塊，叫做，當(dāng)然它是基于開(kāi)發(fā)的。造成這種現(xiàn)象的最根本原因路由沒(méi)有明確的父子層級(jí)關(guān)系。監(jiān)聽(tīng)路由路由狀態(tài)發(fā)生改變時(shí)可以通過(guò)監(jiān)聽(tīng)，通過(guò)注入實(shí)現(xiàn)狀態(tài)的管理。 何為路由 路由機(jī)制運(yùn)可以實(shí)現(xiàn)多視圖的單頁(yè)Web應(yīng)用（single page web application，SPA）。 單頁(yè)應(yīng)用在使用期間不會(huì)重新加載...
摘要：路由模塊的本質(zhì)就是建立起和頁(yè)面之間的映射關(guān)系。這時(shí)候我們可以直接利用傳值了使用來(lái)匹配路由，然后通過(guò)來(lái)傳遞參數(shù)跳轉(zhuǎn)對(duì)應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級(jí)路由實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。 一、前言 要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來(lái)一樣直接用標(biāo)簽編寫(xiě)鏈接哪？vue-router如何使用？常見(jiàn)路由操作有哪些？等等這些問(wèn)...
摘要：路由模塊的本質(zhì)就是建立起和頁(yè)面之間的映射關(guān)系。這時(shí)候我們可以直接利用傳值了使用來(lái)匹配路由，然后通過(guò)來(lái)傳遞參數(shù)跳轉(zhuǎn)對(duì)應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級(jí)路由實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。 一、前言 要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來(lái)一樣直接用標(biāo)簽編寫(xiě)鏈接哪？vue-router如何使用？常見(jiàn)路由操作有哪些？等等這些問(wèn)...
閱讀 1496·2021-10-18 13:29
閱讀 2827·2021-10-12 10:18
閱讀 3616·2021-09-22 15:06
閱讀 2621·2019-08-29 17:09
閱讀 2829·2019-08-29 16:41
閱讀 1526·2019-08-29 13:48
閱讀 3253·2019-08-26 13:49
閱讀 3352·2019-08-26 13:34
