重庆分公司

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

列表渲染Vue2.0与Vue1.0的区别-创新互联

v-for： v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

企业建站必须是能够以充分展现企业形象为主要目的，是企业文化与产品对外扩展宣传的重要窗口，一个合格的网站不仅仅能为公司带来巨大的互联网上的收集和信息发布平台，成都创新互联公司面向各种领域：成都不锈钢雕塑等成都网站设计、成都全网营销解决方案、网站设计等建站排名服务。

基本用法：


    
        `item`

new Vue({
    el:'#app',
    data:{
        arr:['apple','banana','cherry','durain']
    }
})

列表渲染 Vue2.0与Vue1.0的区别

这种写法类似Javascript种的关联数组，key 和 value，item就相当于数组的value。那数组的下标是否也能打出来呢？


    
        {{$index}} `item`

列表渲染 Vue2.0与Vue1.0的区别

同理，如果是对于一个对象呢？


    
        {{$index}} {{$key}} `item`

new Vue({
    el:'#app',
    data:{
        obj:{'a':'apple','b':'banana','c':'cherry'}
    }
})

列表渲染 Vue2.0与Vue1.0的区别

一样可以取到对应的下标，key值和value值

那如果在页面上有一个按钮，点击一下就添加一个列表项出来怎么实现呢？


    添加
    删除
    
        {{$index}} `item`

new Vue({
    el:'#app',
    data:{
        arr:['apple','banana','cherry','durain']
    },
    methods:{
        add:function(){
            this.arr.push('watermelon')
        },
        delete:function(){
            this.arr.splice(0,1)
        }
    }
})

点击添加按钮的时候，在数组的末尾添加一个子项；点击删除按钮的时候，把数组的第一项删掉

列表渲染 Vue2.0与Vue1.0的区别

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。


    {{$index}}-`parentMsg` `item`.`msg`

列表渲染 Vue2.0与Vue1.0的区别

Vue.js 1.0.17及以后版本支持of分隔符，更接近 JavaScript 遍历器的语法：

Template v-for

如同 v-if 模板，你也可以用带有 v-for 的

列表渲染 Vue2.0与Vue1.0的区别

对象迭代 v-for

也可以用 v-for 通过一个对象的属性来迭代


    `value`

列表渲染 Vue2.0与Vue1.0的区别

也可以提供第二个参数，键值：


    `key`: `value`

列表渲染 Vue2.0与Vue1.0的区别

也可以提供第三个参数，索引值：


    {{$index}}-`key`: `value`

在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

整数迭代 v-for

v-for 也可以取整数。在这种情况下，它将重复多次模板。

`n`

列表渲染 Vue2.0与Vue1.0的区别

Vue1.0版本

重复数据的渲染 track-by

前面所有的例子中，同一个数组中都没有重复内容，那如果数组中出现重复内容的话，是否还能正常渲染呢？

代码示例如下：


    添加
    
        `item`

点击按钮时，往数组中添加一个新的元素，这个一点问题也没有。问题是，页面渲染出新的元素‘Roger’以后，你再点这个按钮，控制台报错了。

列表渲染 Vue2.0与Vue1.0的区别

数组中发现了重复元素，如果想要添加重复元素的话，可以使用 track-by="$index/uid" (可以是索引，也可以是数据库中的id 值)

修改示例代码如下：


    添加
    
        `item`

再来看效果，完美解决

列表渲染 Vue2.0与Vue1.0的区别

Vue 2.0版本

相比Vue 1.0 版本，Vue2.0 在列表渲染方面主要有以下几个改变：

1、允许数组重复元素

还是上面的例子，我们引入一个Vue2.0 的js文件


    添加
    
        `item`

没有 track-by，把vue文件换成了2.0版本，效果可见下图，随意添加重复元素

列表渲染 Vue2.0与Vue1.0的区别

2、去掉了一些隐式变量 $index, $key

如果想要获取数组或对象元素的下标可以用 v-for="(val,index) in array"

先看Vue1.0版本的代码示例：


    
        {{$index}}-`item`

使用 $index 来获取数组下标，一点问题也没有：

列表渲染 Vue2.0与Vue1.0的区别

再看Vue2.0版本的代码示例：


    
        {{$index}}-`item`

报错了，说 $index在实例中没有定义

列表渲染 Vue2.0与Vue1.0的区别

我们刚才已经指出了 1.0版本和 2.0版本的区别，现在不妨试一试


    
        `index`-`item`

查看效果，完美解决

列表渲染 Vue2.0与Vue1.0的区别

再来看一个关于 $key的例子

Vue1.0版本


    
        {{$key}} - `value`

列表渲染 Vue2.0与Vue1.0的区别

Vue2.0版本

使用 $key：


    
        {{$key}} - `value`

报错了，$key 未定义

列表渲染 Vue2.0与Vue1.0的区别

使用 v-for="(item,key) in items"：


    
        `key` - `value`

页面渲染截图：

列表渲染 Vue2.0与Vue1.0的区别

3、track-by="$index/uid" 变成

在Vue1.0 中，track-by 除了可以让数组添加重复元素以外，还有很大一个作用就是提升循环的性能

在Vue2.0中，数组重复元素已经不是问题了，性能提升这块还是有必要的


    
        `index`-`item`

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文名称：列表渲染Vue2.0与Vue1.0的区别-创新互联
本文链接：http://cqcxhl.cn/article/dgiogi.html