vue第六课：v-for，v-on补充，v-model

1,v-for指令

根据数据生成列表结构

<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 haochi" :title="item.name">
      {{item.name}}
    </h2>
  </div>
  <script>
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
    var app = new Vue({
      el: '#app',
      data: {
        arr: ["江苏", "浙江", "安徽"],
        haochi: [
          { "name": "苹果好吃" },
          { "name": "西瓜好吃" },
        ]
      },
      methods: {
        add:function(){
          this.haochi.push(
            { "name": "梨子好吃吧" },
          );
        },
        remove:function(){
          this.haochi.shift();
        },
      },

    })
  </script>

2，v-on补充

传递自定义参数，事件修饰符   .enter 是回车事件

<div id='app'>
   <input type="button" value="点击" @click="doit(666,'老铁')">
   <input type="text" @keyup.enter="sayhi">
  </div>
  <script>
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
    var app = new Vue({
      el: '#app',
      data: {
       
       
      },
      methods: {
        doit:function(p1,p2){
          console.log("做IT");
          console.log(p1);
          console.log(p2);
        },
        sayhi:function(){
          alert("测试好了没")
        }
      },
     
    })
  </script>

3，v-model指令

获取和设置表单元素的值（双向数据绑定）

 <div id='app'>
  <input type="button" value="修改信息" @click="setM">
  <input type="text" v-model="message" @keyup.enter="getM">
  <h2>{{message}}</h2>
  </div>
  <script>
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
    var app = new Vue({
      el: '#app',
      data: {
       message:"VUE程序员",
       
      },
     methods: {
      getM:function(){
        alert(this.message)
      },
      setM:function(){
        this.message="前端程序员"
      }

     },
     
    })
  </script>