Vue表单事件绑定

<template>
  <div id="app">
    <ul>
      <li v-for="(item,index) in list" :key="index" >
           {{item}}
      </li>
    </ul>
    <!--v-model.lazy; 点击回车才会执行双向绑定
        v-model.number; 转换成数字,而不是字符串
        v-model.trim; 剪切空格, 如果输入时有空格,直接剪切掉 

    -->
    <!-- <input type="text" name="" v-model="myVal"> -->
    {{myVal}}
    <!-- <input type="checkbox" name="" value="1" v-model="myVal">
    <label>apple</label>   
    <input type="checkbox" name="" value="2" v-model="myVal">
    <label>banana</label>       
    <input type="checkbox" name="" value="3" v-model="myVal">
    <label>orange</label>       -->
    <select v-model="myVal">
      <option v-for="(item,key) in options" :key="key">{{item.name}}</option>
      <!-- <option value="1">banana</option>
      <option value="2">orange</option> -->
    </select>
  </div>
</template>

<script>
//如果要使用vue全局.
import Vue from 'vue'

export default {
  //组件
 
  data() {
    return {
      myVal:[],
      options:[{
        name:'apple',
        value:0
      },{
        name:'banan',
        value:1
      },{
        name:'orange',
        value:1
      }
      ],
      list: [
        {
          name: "apple",
          price: 34
        },
      ],
    }
  },
};
</script>

<style>
</style>