vue常用指令（下）

1.v-for

• v-for的作用：根据数据生成列表结构
• 数组经常和v-for结合使用
• 语法是**(item.index)in**数据
• 数组长度的更新会同步到页面上，是响应式的

 <div id="app">
        <input type="button" value="加菜" @click="add">
        <input type="button" value="减菜" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">
                {{index+1}}{{item}}是水果
            </li>
        </ul>
        <h2 v-for="item in veg" :title="item.name">
            {{item.name}}
        </h2>
    </div>
  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                arr:["苹果","橘子","香蕉"],
                veg:[
                    {name:"西蓝花"},
                    {name:"蛋"}
                ]
            },
            methods:{
                add:function(){
                    this.veg.push({name:"青椒"});
                },
                remove:function(){
                    this.veg.shift();
                }
            }
        })

    </script>

2.v-on(补充)

• 事件绑定方法要写出函数调用，传入自定义参数
• 定义方法是要定义形参来接收传入的实参
• 事件后面跟上点修饰符对事件进行修饰
• .enter可限制触发按键为回车

<div id="app">
    <input type="button" value="点" @click="doit(666,'老铁')">
    <input type="text"@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(p1,p2){
                    console.log(p1);
                    console.log(p2);
                    
                },
                sayHi(){
                    alert("吃了嘛")
                }
            }

        })

    </script>

3.v-model

• v-model作用是便捷设置和获取表单的值
• 绑定的数据元素会和表单元素的值关联
• 绑定是双向的

  <div id="app">
       <input type="button" value="修改" @click="setM">
    <input type="text" v-model="message" @keyup.enter="getM">
    <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:{
            getM:function(){
                alert(this.message)
            },
            setM:function(){
                this.message="Jack";
            }
        }

      })
  </script>

4.案例：记事本

<div id="app">
    <input type="text" @keyup.enter="add" v-model="inputvalue">
    <ul>
        <li v-for="(item,index) in list">
            <div>
                {{index+1}}{{item}}
                <button value="123" @click="remove(index)"></button>
            </div>
        </li>
    </ul>
    <strong v-if="list.length!=0">{{list.length}} items left</strong>
    <button @click="clear" v-show="list.length!=0">clear</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   
  <script>
      var app=new Vue({
            el:"#app",
            data:{
                list:["睡觉觉","吃饭饭","打豆豆"],
                inputvalue:"拉粑粑"
            },
            methods:{
                add:function(){
                    this.list.push(this.inputvalue);
                },
                remove:function(index){
                   this.list.splice(index,1);
                },
                clear:function(){
                    this.list=[];
                }
            }

      })
  </script>