码迷,mamicode.com
首页 > 其他好文 > 详细

第二节:指令的使用(3)

时间:2016-11-23 07:15:09      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:reverse   dem   push   str   input   vue   this   click   eve   

1、v-for 对于数据的重复渲染,可以使用(itm,index)取表示相对的数组的值和索引。

<body id="example">
        <ul id="repeat-object">
            <li v-for = "item in items">{{item.msg}}</li>
            <li> =========</li>
            <li v-for="(item,index) in items"> {{item}}:{{index}}</li>
        </ul>

    </body>
    <script>
        var demo = new Vue({
            el:"#repeat-object",
            data:{
                items:[
                    {msg:"1"},
                    {msg:"2"}
                ]
            }
        });
    </script>

 

对于for循环中,数组的更新操作。push、pop、shift、unshift、splice、sort、reverse都支持视图的更新。

2、 v-on 指令:添加事件的处理机制。v-on:click  的简写为  @click

<body id="example">
        <ul id="repeat-object">
            <li v-for = "item in items">{{item.msg}}</li>
            <li> =========</li>
            <li v-for="(item,index) in items"> {{item}}:{{index}}</li>
            <li><input type="button" value="添加对象" v-on:click="AddItem" ></input></li>
        </ul>
        
    </body>
    <script>
        var demo = new Vue({
            el:"#repeat-object",
            data:{
                items:[
                    {msg:"1"},
                    {msg:"2"}
                ]
            },
            methods:{
                AddItem:function(){
                    var i = this.items.length +1;
                    var o = {};
                    o.msg = i.toString();
                    this.items.push(o);
                }
            }
        });
    </script>

 

注意:目前从今天开始看vuejs版本是2.0.7

 

第二节:指令的使用(3)

标签:reverse   dem   push   str   input   vue   this   click   eve   

原文地址:http://www.cnblogs.com/shannonliang/p/6091708.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!