Vue表单绑定v-model 及其修饰符

1.v-model的基本使用
在默认情况下，v-model是在input事件中同步输入框的数据
界面改变 数据也改变 把界面上的value传过去

<div id="app">
    <input type="text" v-model="message">
</div>
</body>
<script>
const app = new  Vue({
     
    el:"#app",
    data:{
     
        message:'2345yu'
    }
})
</script>

2.v-model的原理
背后包含两个指令

div id="app">
    <input type="text" :value="message" @input="valueChange">
     <input type="text" :value="message" @input="messge = $ event.target.value">
</div>
</body>
<script>
const app = new  Vue({
     
    el:"#app",
    data:{
     
        message:'2345yu'
    },
    methods:{
     
    valueChange(){
     
        this.message = event.target.value;
     }
    }
})
</script>

2.v-model结合radio类型
单选圈圈

<div id="app">
  <label foe="male">
  //label ：没有label 只能点框  有label 可以点后面的字
    <input type="radio" id="male"  name="sex" value="男" v-model="sex">男
   </label >
  <label foe="female">
    <input type="radio" id="female"  name="sex" value="女" v-model="sex">女
    //name一样的时候  radio为单选  若绑定同样的v-model  也互斥
   </label >
</div>
</body>
<script>
const app = new  Vue({
     
    el:"#app",
    data:{
     
        message:'2345yu',
        sex:''
    }
})
</script>

3.v-model结合checkbox类型
checkbox：复选框（单个勾选框和多个勾选框）

<div id="app">
  <!--------------------checkbox单选框----------------------------->
  <label for="male">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label >
 <!--------------------checkbox多选框----------------------------->
  <label for="male">
    <input type="checkbox" id="agree" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" id="agree" value="足球" v-model="hobbies">足球
    <input type="checkbox" id="agree" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" id="agree" value="羽毛球" v-model="hobbies">羽毛球
  </label >
</div>
</body>

<script>
const app = new  Vue({
     
    el:"#app",
    data:{
     
        message:'2345yu',
        isAgree:false,  //默认false时，未选中
        hobbies:[]//选中哪个，value进来哪个  可以多个
    },
   
})
</script>

4.v-model 结合select类型使用

<div id="app">
    <!--选择一个-->
    <select  name="abc" id="1" v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="西瓜">西瓜</option>
        <option value="太郎">太郎</option>
    </select>
   <!--选择多个   multiple  加上按住Ctrl可多选-->
    <select  name="abc" id="2" v-model="fruits" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="西瓜">西瓜</option>
        <option value="太郎">太郎</option>
    </select>
</div>
</body>

<script>
    const  app=new Vue({
     
        el:"#app",
        data:{
     
            fruit:"香蕉", //下拉框默认选择香蕉
            fruit:[]
        }
    })
</script>

5.v-model修饰符的使用

• lazy修饰符
  可以让数据在失去焦点的时候或者敲击回车的时候才会更新数据

<input type="text" v-model.lazy="fruits">

• number修饰符
  输入框输入值默认类型为字符串 .number强行转化为数字类型

<input type="text" v-model.number="fruits">

• trim修饰符
  输入内容为收尾有空格，我们希望把他去除 trim可过滤两边空格

<input type="text" v-model.trim="fruits">