基本用法

• 场景

<template>
<div >
    <input v-model="message" placeholder="edit me">    // 输入栏 message需要声明，data中
      <p>Message is: {{ message }}</p>
     <button @click="message='jack'">set message</button>    //点击调用message='jack'
</div>

![f5cdd8b1be6f1d2c29d64d7cd95f2fe.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d727428abde9442ea8e9b62a9cf0755f~tplv-k3u1fbpfcp-watermark.image?)
</template>

<script>


export default {
    
    data(){
        return {message:'hi'}
    },                                 //声明并初始化message
 
    
}
</script>

• 最基本双向绑定
  • 当修改内存中的message，页面会自动变化
  
  • 当用户修改页面中的内容（input）,内存会发生变化
  

多行文本

• 同理上，将input改为texarea标签,双向绑定机制同上

略...
 <input v-model="message" placeholder="edit me"></textarea>  

复选框

单个复选框

• 官方用法

<input type="checkbox" id="checkbox" v-model="checked"> 

<label for="checkbox">{{ checked }}</label> //根据id筛选出input 

• 改进，直接用label标签包裹

<label >
  <input type="checkbox" v-model="x">    //type声明表单类型   x为布尔值,表示是否选中
  <span>{{x}}</span>
</label>

选项
data(){
  return { x:true}   //  默认为true 即默认选中
     }

多个复选框

<div >
    爱好：{{x}}
<label>
   <input type="checkbox" v-model="x" value="1">// 直接value为字符串，:value 为数值 value的内容为选项的代号，绑定到数组
   <span>打篮球</span>  
</label>
   <label>
   <input type="checkbox" v-model="x" value="'2">
   <span>弹钢琴</span>
</label>
<label>
   <input type="checkbox" v-model="x" value="3">
   <span>摄影</span>
</label>
</div>

略
data(){
    return {x:[]}   //数组，存放选项的代号
     }

单选框 -多个里面选一个

<div >
    爱好：{{x}}
<label>
   <input type="radio" v-model="x" :value="1">
   <span>打篮球</span>
</label>
   <label>
   <input type="radio" v-model="x" :value="2">
   <span>弹钢琴</span>
</label>
<label>
   <input type="radio" v-model="x" :value="3">
   <span>摄影</span>
</label>
</div>

data() 同上

选择框 下拉列表

• 基本用法

<div >
    你想要：{{x}}

  <select v-model="x">
    <option value="" >-</option>
    <option :value="1">打篮球</option>
    <option :value="2">弹钢琴</option>
    <option :value="3">摄影</option>
  </select>
  

</div>

data同上

• 结合数据库

<div >
    你想要：{{x}}
<hr>
  <select  multiple v-model="x"> //multiple为多选功能，去掉为单选功能
    <option value="" >-</option>
    <option v-for="item in array" :value="item.value" :key="item.value">  //循环，item为array数组的各个对象{}, 表单的value就是item的value,key就是item的key
    {{item.text}}     //选项内容为item的text
    </option>
  </select>
  

</div>

略
       array:[   
                {text:"打篮球",value: 1},
                {text:"弹钢琴",value: 2},
                {text:"摄影",value: 3},
                ],

                x:[]

form 表单

<div>
    登录
<form @submit.prevent="onsubmit">   //监听form表单的submit事件，阻止默认动作
<label>
  <span>用户名</span>
  <input type="text" v-model="user.username" >    // 输入用户名
</label>
<label>
  <span>密码</span>
  <input type="password" v-model="user.password" >  //输入密码
</label>
<label>
    <button type="submit">登录</button>              
</label>
</form>
</div>


export default {
    data(){
        return{
            user:{
                username:'',              //用户名数据库，用于表单绑定
                password:''
            },

        
            
            }
        } ,
        methods:{
            onsubmit(){
                console.log(this.user)   //处理用户信息的方法
            }
        }
    }

• 点击登录,会得到用户的信息，后续可以对这些信息进行相关处理

修饰符

.lazy:用户移出input之后进行数据同步v-model.lazy

• 输入框输入内容时，数据会实时同步
• 加入.lazy,在用户输入完内容移出输入框时才同步数据

.number v-omdel.number

• 将用户输入的值转成数值类型
• 过滤掉数值之外的值

.trim

• 过滤用户输入的首尾空白字符串

v-model的原理

<input type="text" :value="user.name"    //input的值为username
@input="user.username=$event.target.value"> //监听input事件，让username等于事件

</input>

总结

-如何实现Vue 的双向绑定，即v-model的用法。

• 双向绑定

  • v-model可以实现绑定一个数据，在这个数据变化的时候，UI会变化。
  • 在用户改变UI的时候，数据也会变化。

• 深入

  • v-model是v-bind:value和v-on:input的语法糖。
  • v-on:input="xxx=$event.target.value"