vuejs中怎么利用v代表指令实现列表渲染 - 行业资讯 - 肥雀云

　　介绍

vuejs中怎么利用v代表指令实现列表渲染,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

1。使的用js的循环去遍历填充

2. ng的ng-repeat

今天我们使用vue。js的v

<强>一、html

& lt; div 类=皊hop_list_box"比; 　　,,& lt; ul> 　　,,,& lt; li> & lt; span>蚌埠& lt;/span> & lt; span>凤阳东路& lt;/span> & lt;/li> 　　,,,& lt; li> & lt; span>蚌埠& lt;/span> & lt; span>凤阳东路& lt;/span> & lt;/li> 　　& lt;才能/ul> 　　& lt;/div>

<强>二,Json数据节点

vuejs中怎么利用v代表指令实现列表渲染

<强>,三,使用v代表绑定数据到页面上

引用vue。js,请求数据成功之后实例化一个Vue.el是绑定到那个元素下

vuejs中怎么利用v代表指令实现列表渲染

注意这里时一个数组里面包了一些对象——在{}或者({},{},{})

, GetAjaxData (“js/cstore2.json",,{名称:“zq"},, function (dat), { 　　,,,,, 　　,,,,,var data =dat.cstore 　　　　,,,,,//,console.log(数据) 　　,,,,, 　　,,,,,var vm =, Vue ({new 　　,,,,,,,el:, & # 39; #示例# 39; 　　,,,,,,,数据:,{ 　　,,,,,,,,,项目:数据　　,,,,,,,} 　　,,,,,}) 　　,,,});

vuejs中怎么利用v代表指令实现列表渲染

& lt; div 类=皊hop_list_box"比; 　　,,,,,,,,,,& lt; ul id=癳xample"比; 　　,,,,,,,,,,,,& lt; li v=癷tem of items"比; 　　,,,,,,,,,,,,,,& lt; span> {{, item.city }} & lt;/span> & lt; span> {{, item.shop }} & lt;/span> 　　,,,,,,,,,,,,& lt;/li> 　　,,,,,,,,,,,, 　　,,,,,,,,,,& lt;/ul> 　　,,,,,,,,& lt;/div>

到这里就好了。

不过也可以使用模板)

<强>模板v-for 类似于v

vuejs中怎么利用v代表指令实现列表渲染

,{{项目。城市}}也可以使用v-text="项目。城市”代替,优点是数据没有加载完时不会看到{{}}占位符

关于vuejs中怎么利用v代表指令实现列表渲染问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。