首页 > 代码库 > 第二节：指令的使用（3）

第二节：指令的使用（3）

2024-08-22 15:24:43   219人阅读

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）


联系
我们