快捷導(dǎo)航

vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實(shí)現(xiàn)方法

更新時(shí)間：2018年05月17日 11:23:36 作者：kengwfpzu920

這篇文章主要介紹了vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在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è)類(lèi)似的例子，我就開(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è)類(lèi)似的安全看看

先上部分代碼

<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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: