在vue官網把文檔掃了一遍后,就開始寫網站項目了,沒有設計,就百度里找了一個h5的助贏軟件的網站把他copy下來,想想有點壞了,接着把內容改改吧。
首先開始做一個列表展示
vue實例好后,給對象添加默認數據,列表加載成功。查看源代碼,看看是否和心目中想的一樣。當前還只是把初始化的默認數組展示出來,列表里面的操作,跳轉還沒有加,試着給初始化的數組添加id字段和數字
刷新一下,沒有效果,坑人的Chrome,緩存特別嚴重,不得不清緩存或者強制刷新。vue在控制台出錯了,說a標簽內容(<a href="xxx/detail/{{id}}">文章1</a>)的{{id}}語法錯誤,查了下文檔並沒有一個類似的例子,我就開始憑自己的經驗試着改寫下
整了好一會,發現不理想,看來文檔讀的不夠仔細,有必要針對性的的搗一下。看到標簽的class與syle綁定,看到有對象語法和數組語法,二話不說,先把對象寫法寫進去a標簽,刷新看效果,發現a標簽的href是這樣detail/[object object],我笑了。
看來還是用錯了,看了數組語法描述后,直接coding,<a v-bind:href="['xxx/detail/'+item.Id]">文章1</a> 這下出效果了
為什么叫數組語法,一直不明白了。為什么這個地方只能這樣寫,總感覺不妥,找個類似的安全看看,別人是怎么寫的,發現自己寫的太吐血了
先上部分代碼
<tr v-for="item in Strategys" class="ng-scope">
<td>
<a class="ng-binding ng-scope" v-bind:href="['xxx/detail/'+item.Id]" >{{item.Name}}</a>
</td>
數據塊代碼
var vm = new Vue({
el: '#section-strategies',
data: {
parentMessage: 'Parent',
StrategyCnt:0,
Strategys: [{id:1,name:'文章1'},{id:2,name:'文章2'}]
}
})
接着上大招,使用Ajax請求服務端數據,不可能一直用初始化及默認的數據

