欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

深入浅析Vue.js 中的 v-for 列表渲染指令

程序员文章站 2023-11-28 20:50:16
1 基本用法 当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for。 它的表达式需要结合 in 来使用,类似 item in items 的形...

1 基本用法

当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for。 它的表达式需要结合 in 来使用,类似 item in items 的形式。

1.1 遍历数组

html:

<div id="app">
 <ul>
 <li v-for="n in news">{{n.title}}</li>
 </ul>
</div>

js:

<script>
 var app = new vue({
 el: '#app',
 data: {
  news: [
  {title: '被智能手机绑架的i世代 爱熬夜、拒绝恋爱、不考驾照'},
  {title: '黑莓宣布14亿美元收购网络安全公司cylance'},
  {title: '如何看待阿里巴巴开酒店这件事?'}
  ]
 }
 });
</script>

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

在 v-for 指令的表达式中, news 是 data 内定义的数据, n 是当前数组元素的别名。

列表渲染指令的表达式也支持使用 of 作为分隔符。

html:

<li v-for="n of news">{{n.title}}</li>

v-for 表达式支持当前项索引参数,索引从 0 开始,它是可选的 。

html:

<li v-for="(n,index) of news">{{index}} - {{n.title}}</li>

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

也可以使用内置标签 <template> ,渲染多个元素。

html:

<div id="app2">
 <dl>
 <template v-for="n in news">
  <dt>{{n.title}}</dt>
  <dd>{{n.content}}</dd>
 </template>
 </dl>
</div>

js:

var app2 = new vue({
 el: '#app2',
 data: {
 news: [
  {title: '科技',content:'智能手机是我们生活的好帮手... ...'},
  {title: '互联网',content:'黑莓公司周五宣布... ...'},
  {title: '社会',content:'阿里实体酒店“flyzoo hotel”将开业... ...'}
 ]
 }
});

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

1.2 遍历对象属性

我们也可以使用 v-for 列表渲染指令来遍历对象属性。

html:

<div id="app3">
 <li v-for="val in account">{{val}}</li>
</div>

js:

var app3 = new vue({
 el: '#app3',
 data: {
 account: {
  name: 'deniro',
  messagecount: 100
 }
 }
});

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

遍历对象属性,可以带上两个可选参数,它们就是对象的属性名和索引:

html:

<li v-for="(val,name,index) in account">{{index}} - {{name}} : {{val}}</li>

1.3 迭代整数

html:

<div id="app4">
 <ul>
 <li v-for="i in 5">{{i}}</li>
 </ul>
</div>

js:

var app4 = new vue({
 el: '#app4'
});

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

2 更新数组

vue.js 的核心是数据与视图的双向绑定。因此当我们修改数组时, vue.js 就会检测到数据了变化,所以用 v-for 渲染的视图也会更新 。使用以下方法修改数组时,就会触发视图更新:

  • push()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

这些方法会改变原数组,所以又称为变异方法。

我们使用 push() 为 app 对象新增一个新闻标题:

js:

app.news.push({
 title:'沃尔玛将超过苹果成美国第三大在线零售商'
});

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

也有一些非变异方法,它们不会改变原数组,只会返回新数组:

  • filter()
  • concat()
  • slice()

我们在使用这些方法时,可以通过设置新数组的方式来更新视图。

js:

//非变异方法更新数组
 app.news = app.news.filter(function (item) {
 return item.title.match(/阿里巴巴/);
 });

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

这个示例中,我们使用 filter 函数,把新闻标题中含有“阿里巴巴”字样的新闻过滤出来。

vue.js 在检测数组变化时,会最大化地复用 dom 元素。 替换的数组,如果含有相同元素的项并不会被重新渲染,所以不用担心性能问题。

注意:通过以下方法来改变数组, vue.js 是无法检测的,所以不会更新视图:

app.new[1]={...}
app.new.length=1

我们可以使用 vue.js 内置的 set 方法(可指定索引)来更新数组:

//通过 set 的设置索引方式来更新数组
vue.set(app.news,1,{
 title: '大数据之下的锦鲤:为什么你的微博总抽不到奖'
});

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

也可以使用 splice 指定索引来更新数组:

//通过 splice 的设置索引方式来更新数组
app.news.splice(1, 0, {
 title: '南京现“刷脸支付”超市 网友:素颜去结账机器能识'
});

至于第二个问题,同样可以通过 splice 来实现:

//通过 splice 来删除数组元素
app.news.splice(1);

以上示例 demo 。

3 过滤或排序

其实,之前已经有一个示例用到了 filter() 过滤方法。如果我们不想改变原数组,只想返回过滤或排序后数组副本,这时可以使用计算属性来实现。

html:

<div id="app">
 <h3>过滤出带“美元”的标题</h3>
 <ul>
 <li v-for="(n,index) in filternews">{{index}} - {{n.title}}</li>
 </ul>
 <h3>按照标题长度,由短到长排序</h3>
 <ul>
 <li v-for="(n,index) in sortnews">{{index}} - {{n.title}}</li>
 </ul>
</div>

js:

<script>
 var app = new vue({
 el: '#app',
 data: {
  news: [
  {title: '被智能手机绑架的i世代 爱熬夜、拒绝恋爱、不考驾照'},
  {title: '黑莓宣布14亿美元收购网络安全公司cylance'},
  {title: '如何看待xxx开酒店赚美元这件事?'}
  ]
 },
 computed: {
  //过滤出带“美元”的标题
  filternews: function () {
  return this.news.filter(function (item) {
   return item.title.match(/美元/);
  })
  },
  //按照标题长度,由短到长排序
  sortnews: function () {
  return this.news.sort(function (val1, val2) {
   if(val1.title.length < val2.title.length){
   return -1;
   }
  })
  }
 }
 });
</script>

效果( demo ):

深入浅析Vue.js 中的 v-for 列表渲染指令

总结

以上所述是小编给大家介绍的vue.js 中的 v-for 列表渲染指令,希望对大家有所帮助