vuejs中怎么利用v-for指令實(shí)現(xiàn)列表渲染
vuejs中怎么利用v-for指令實(shí)現(xiàn)列表渲染，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、蚌山ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的蚌山網(wǎng)站制作公司
1.使用js的for循環(huán)去遍歷填充
2.ng的ng-repeat
今天我們使用vue.js的v-for
.jpg)
一、html
二、Json數(shù)據(jù)節(jié)點(diǎn)
.jpg)
三、使用v-for綁定數(shù)據(jù)到頁面上
引用vue.js,請求數(shù)據(jù)成功之后實(shí)例化一個(gè)Vue。el是綁定到那個(gè)元素下
.jpg)
注意這里時(shí)一個(gè)數(shù)組里面包了一些對(duì)象---->{}或者[{},{},{}]
GetAjaxData("js/cstore2.json", {name:"zq"}, function (dat) {
var data = dat.cstore
// console.log(data)
var vm = new Vue({
el: '#example',
data: {
items: data
}
})
});
{{ item.city }}{{ item.shop }}
到這里就ok了。
不過也可以使用template v-for
template v-for 類似于v-for
{{item.city}}也可以使用v-text=” item.city”代替，優(yōu)點(diǎn)是數(shù)據(jù)沒有加載完時(shí)不會(huì)看到{{}}占位符
關(guān)于vuejs中怎么利用v-for指令實(shí)現(xiàn)列表渲染問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
文章標(biāo)題：vuejs中怎么利用v-for指令實(shí)現(xiàn)列表渲染
本文URL：
http://weahome.cn/article/ggopph.html
重慶分公司
重慶分公司
