vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實(shí)現(xiàn)方法
在vue官網(wǎng)把文檔掃了一遍后，就開(kāi)始寫(xiě)網(wǎng)站項(xiàng)目了，沒(méi)有設(shè)計(jì)，就百度里找了一個(gè)h5的助贏軟件的網(wǎng)站把他copy下來(lái)，想想有點(diǎn)壞了，接著把內(nèi)容改改吧。
首先開(kāi)始做一個(gè)列表展示
vue實(shí)例好后，給對(duì)象添加默認(rèn)數(shù)據(jù)，列表加載成功。查看源代碼，看看是否和心目中想的一樣。當(dāng)前還只是把初始化的默認(rèn)數(shù)組展示出來(lái)，列表里面的操作，跳轉(zhuǎn)還沒(méi)有加，試著給初始化的數(shù)組添加id字段和數(shù)字
刷新一下，沒(méi)有效果，坑人的Chrome，緩存特別嚴(yán)重，不得不清緩存或者強(qiáng)制刷新。vue在控制臺(tái)出錯(cuò)了，說(shuō)a標(biāo)簽內(nèi)容（<a href="xxx/detail/{{id}}" rel="external nofollow" >文章1</a>）的{{id}}語(yǔ)法錯(cuò)誤，查了下文檔并沒(méi)有一個(gè)類似的例子，我就開(kāi)始憑自己的經(jīng)驗(yàn)試著改寫(xiě)下
整了好一會(huì)，發(fā)現(xiàn)不理想，看來(lái)文檔讀的不夠仔細(xì)，有必要針對(duì)性的的搗一下?？吹綐?biāo)簽的class與syle綁定，看到有對(duì)象語(yǔ)法和數(shù)組語(yǔ)法，二話不說(shuō)，先把對(duì)象寫(xiě)法寫(xiě)進(jìn)去a標(biāo)簽，刷新看效果，發(fā)現(xiàn)a標(biāo)簽的href是這樣detail/[object object]，我笑了。
看來(lái)還是用錯(cuò)了，看了數(shù)組語(yǔ)法描述后，直接coding，<a v-bind:href="['xxx/detail/'+item.Id]" rel="external nofollow" rel="external nofollow" >文章1</a> 這下出效果了
為什么叫數(shù)組語(yǔ)法，一直不明白了。為什么這個(gè)地方只能這樣寫(xiě)，總感覺(jué)不妥，找個(gè)類似的安全看看
先上部分代碼
<tr v-for="item in Strategys" class="ng-scope">
<td>
<a class="ng-binding ng-scope" v-bind:href="['xxx/detail/'+item.Id]" rel="external nofollow" rel="external nofollow" >{{item.Name}}</a>
</td>
數(shù)據(jù)塊代碼
var vm = new Vue({
el: '#section-strategies',
data: {
parentMessage: 'Parent',
StrategyCnt:0,
Strategys: [{id:1,name:'文章1'}，{id:2,name:'文章2'}]
}
})
接著上大招，使用Ajax請(qǐng)求服務(wù)端數(shù)據(jù)，不可能一直用初始化及默認(rèn)的數(shù)據(jù)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
VUE學(xué)習(xí)寶典之vue-dialog使用方法
在Vue中dialog對(duì)話框是一種常見(jiàn)的組件,用于在用戶與應(yīng)用程序進(jìn)行交互時(shí)顯示信息或收集輸入,這篇文章主要給大家介紹了關(guān)于VUE學(xué)習(xí)寶典之vue-dialog使用方法的相關(guān)資料,需要的朋友可以參考下2024-05-05
vue-element如何實(shí)現(xiàn)動(dòng)態(tài)換膚存儲(chǔ)
這篇文章主要介紹了vue-element如何實(shí)現(xiàn)動(dòng)態(tài)換膚存儲(chǔ)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue項(xiàng)目中使用postcss-px2rem的方法總結(jié),在項(xiàng)目中為了屏幕適配，經(jīng)常會(huì)用到rem，postcss-px2rem就是為了讓我們直接在將代碼中px自動(dòng)轉(zhuǎn)化成對(duì)應(yīng)的rem的一個(gè)插件，需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了vue-Split實(shí)現(xiàn)面板分割，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要給大家分享了 Vue中插槽slot的使用方法，下面文章內(nèi)容圍繞插槽slot的相關(guān)資料展開(kāi)其的使用方法,需要的朋友可以參考一下，希望多大家有所幫助2021-11-11
Vue.js的復(fù)用組件開(kāi)發(fā)流程完整記錄
這篇文章主要給大家介紹了關(guān)于Vue.js的復(fù)用組件開(kāi)發(fā)流程的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
在實(shí)際的Vue開(kāi)發(fā)中,我們經(jīng)常需要在多個(gè)組件之間共享一些工具函數(shù)或類,比如格式化日期、處理字符串、操作數(shù)組等,本文將詳細(xì)介紹如何在Vue實(shí)例上掛載自己定義的工具類,并在項(xiàng)目中高效使用這些工具,需要的朋友可以參考下2024-09-09
使用v-bind：class或者v-bind:style或者直接通過(guò)操作dom來(lái)對(duì)其樣式進(jìn)行更改；接下來(lái)通過(guò)本文給大家分享Vue.js中對(duì)css的操作（修改）具體方式，感興趣的朋友跟隨小編一起看看吧2018-10-10
這篇文章主要介紹了Vuex 快速入門(mén)(簡(jiǎn)單易懂)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
寫(xiě)給新手同學(xué)的vuex快速上手指北小結(jié)
這篇文章主要介紹了寫(xiě)給新手同學(xué)的vuex快速上手指北小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04