Vue快速入门（4）

v-for

• 作用：根据数据生成列表
• 语法是（iteml,index）in 数据，item和index是占位符（名字可变）
• 数组经常和v-for使用
• 数组的更新会同步到页面上，是响应式的

程序例子：

    <div id="app">
        <p v-for="item in arr">{{item}}</p>
        <hr><!--分割线-->
        <ul>
            <li v-for="item in arr">
                段位: {{item}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item,index) in arr">
                {{index}} 段位: {{item}}
            </li>
        </ul>
        <hr>   
        <ul>
            <button @click="add">上菜</button>
            <button @click="remove">吃掉</button>
            <li v-for="(item,index) in foods" v-bind:title="item.name">
                第{{index+1}}个是: {{item.name}}
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["黄铜", "白银", "黄金", "白金"],
                foods: [{ name: "香肠" }, { name: "土豆" }, { name: "西红柿" }]
            },
            methods:{
                add:function(){
                    this.foods.push({name:"加个蛋"});
                },
                remove:function(){
                    this.foods.pop();//移除最后一个元素
                    //this.foods.shift();//移除第一个元素
                }
            }
        })
    </script>

运行结果：

v-model

• 作用：获取和设置表单元素的值（双向数据绑定）
• 表单元素的值和绑定的数据同步更新（即无论更改哪一个另一个都会同步更新）

程序例子：

<div id="app">
        <input type="button" value="修改message" @click="setMessage">
        <input type="text" v-model="message" @keyup.enter="getMessage" >
        <P>{{message}}</P>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
           el:"#app",
           data:{
               message:"Hello"
           },
           methods:{
               getMessage:function(){
                   alert(this.message);
               },
               setMessage:function(){
                   this.message="Vue";
               }
           }
       })
    </script>

运行结果：

v-on补充

• 在利用v-on/@绑定事件是，还可以传递参数
• 回车事件 @keyup.enter

程序例子：
包含参数的事件，字符串用单引号
@click="doIt(666,' Vue')
doIt:function(param1,param2){ alert(param1 + param2); }

 <div id="app">
        <input type="button" value="点我" @click="doIt(666,' Vue')">
        <input type="text" value="" @keyup.enter="sayHi">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
           el:"#app",
           methods:{
             doIt:function(param1,param2){
                alert(param1 + param2);
             },
             sayHi:function(){
                 alert("吃了没!");
             }
           }
       })
    </script>