第二节：指令的使用

Posted 2020-08-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第二节：指令的使用相关的知识，希望对你有一定的参考价值。

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

以上是关于第二节：指令的使用的主要内容，如果未能解决你的问题，请参考以下文章