vueJs的学习笔记（四）

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_34143774

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量92

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/comefuture/p/8305944.html

本文详细介绍了Vue.js框架中v-for指令的基本用法及其高级应用，包括数组和对象的迭代显示、索引和键名的使用、数组和对象的更新检测、过滤排序结果的显示等。

列表渲染

使用v-for的指令，可以实现view层的数组显示。
它的语法是：item in items。
item表示要迭代的数据，items表示数据源。

实例：
HTML：

<ul id="ulOne">
  <li v-for="item in items">
    {{item.msg}}
  </li>
</ul>

JS：

var app = new Vue({
  el:"#ulOne",
  data:{
    items:[
      {msg:"1"},
      {msg:"2"},
      {msg:"3"}
    ]
  }
})

数组还提供了第二个参数index作为索引。
它的语法是：(item,index) in items;

实例：
HTML：

<ul id="ulOne">
    <li v-for="(item,index) in items">
        {{info}}-{{index}}-{{item.msg}}
    </li>
</ul>

JS：

var app = new Vue({
                     el:"#ulOne",
                     data:{
                             info:"number",
                             items:[
                               {msg:"1"},
                               {msg:"2"},
                               {msg:"3"}
                              ]
                         }
                })

对对象使用v-for

实例：
HTML：

<ul id="ulOne">
          <li v-for="value in objects">
            {{value}}
          </li>
        </ul>

JS：

var app = new Vue({
                              el:"#ulOne",
                              data:{
                                objects:{
                                    firstname:"peter",
                                    lastname:"sensa"

                                    }
                                }

                })

同之前一样，我们可以在参数中添加index和新的参数key（键名）。

HTML：

<ul id="ulOne">
          <li v-for="(key,value,index) in objec">
            {{index}}--{{key}}:{{value}}
          </li>
        </ul>

JS：

var app = new Vue({
                              el:"#ulOne",
                              data:{
                                objec:{
                                    firstname:"peter",
                                    lastname:"sensa"

                                    }
                                }

                })

数组更新检测

vuejs中将js里面可以对数据进行添加，删除等操作的方法来监控数组的变异。
例如运用push（）：
语法是：实例对象.数组名.方法({数组})

app.items.push({msg:"4"})

除了改变数组，还有不改变原数组，返回一个新数组的方法。
例如：

app.items = app.items.filter(function(item){return item.msg.match(/1/)})

对象更改检测注意事项

由于js的限制，vue中不能直接添加删除对象属性，但是可以响应式的添加删除嵌套的对象属性。

我们以一个实例来举例：
语法是：Vue.set(实例名字.嵌套属性名,属性,值).
我们的数据借用上面存在的v-for的属性实例：

Vue.set(app.objec,"age",12)

如果你想赋予多个属性值，可以采用下面的方式：

app.objec = Object.assign({}, app.objec, {
  age: 27,
  favoriteColor: 'Vue Green'
})

显示过滤排序结果

我们想要显示过滤排序结果的副本，而不是改变原数组。
我们可以使用计算属性来显示。

实例：
HTML：

<ul id="ulOne">
          <li v-for="fi in evenNumbers">
            {{fi}}
          </li>
        </ul>

JS：

var app = new Vue({
                              el:"#ulOne",
                              data:{
                                    numbers:[1,2,3,4,5]
                               },
                              computed:{
                                evenNumbers:function(){
                                    return this.numbers.filter(function(number){
                                        return number % 2 == 0;
                                    })
                                }
                              }

                })

PS:或者你也可以使用methods的方式来进行。关于methods的区别我们之前已经介绍过了。

v-for的其他用法

例如：

 <li v-for="fi in 10">
            {{fi}}
          </li>

实现在10以内的整数遍历。

PS：v-for和v-if在同一层的时候将会是v-for的优先级更高。

转载于:https://www.cnblogs.com/comefuture/p/8305944.html