首頁 > web前端 > js教程 > 主體

怎樣實作vue 標籤屬性資料綁定和拼接

php中世界最好的语言
發布: 2018-05-29 09:59:25
原創
2055 人瀏覽過

這次帶給大家怎麼實作vue標籤屬性資料綁定和拼接,實作vue標籤屬性資料綁定和拼接的注意事項有哪些,下面就是實戰案例,一起來看一下。

在vue官網把文件掃了一遍後,就開始寫網站專案了,沒有設計,就百度裡找了一個h5的助贏軟體的網站把他copy下來,想想有點壞了,接著把內容改改吧。

首先開始做一個列表展示

vue實例好後,給物件添加預設數據,列表載入成功。檢查原始碼,看看是否和心目中想的一樣。目前還只是把初始化的預設數組展示出來,列表裡面的操作,跳轉還沒加,試著給初始化的數組添加id字段和數字

刷新一下,沒有效果,坑人的Chrome,快取特別嚴重,不得不清除快取或強制刷新。 vue在控制台出錯了,說a標籤內容(文章1)的{{id}}語法錯誤,查了下文檔並沒有一個類似的例子,我就開始憑自己的經驗試著改寫下
整了好一會,發現不理想,看來文檔讀的不夠仔細,有必要針對性的的搗一下。看到標籤的class與syle綁定,看到有物件語法和陣列語法,二話不說,先把物件寫法寫進去a標籤,刷新看效果,發現a標籤的href是這樣detail/[object object],我笑了。

看來還是用錯了,看了數組語法描述後,直接coding,文章1 這下出效果了

為什麼叫數組語法,一直不明白了。為什麼這個地方只能這樣寫,總感覺不妥,找個類似的安全看看,別人是怎麼寫的,發現自己寫的太吐血了

先上部分代碼

<tr v-for="item in Strategys" class="ng-scope">
 <td>
  <a class="ng-binding ng-scope" v-bind:href="[&#39;xxx/detail/&#39;+item.Id]" rel="external nofollow" rel="external nofollow" >{{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請求服務端數據,不可能一直用初始化及默認的數據

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

如何對於create-react-app修改為多頁面支援

在不使用select的情況下vue怎麼實作下拉框功能

以上是怎樣實作vue 標籤屬性資料綁定和拼接的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!