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