VUE3 v-model数据双向绑定及原理

v-model写法

<input type="text" v-model="mag">
  <div>{
          
   {
          
   mag}}</div>

data(){
          
   
        return {
          
   
            mag:HELLO WORLD
        }
    },

v-model原理

分为两步 1、v-bind绑定value属性 2、v-on绑定input事件

<div>{
          
   {
          
   mag}}</div>
  <input type="text" :value="mag" @input="change">

data(){
          
   
        return {
          
   
            mag:HELLO WORLD
        }
    },
    methods:{
          
   
        change(e){
          
   
            this.mag = e.target.value   
            console.log(e)
        }
    }

v-model复选框 (Checkbox)

单个勾选

<input type="checkbox" id="checkbox" v-model="checked" />
  <label for="checkbox">{
          
   {
          
    checked }}</label>

data(){
          
   
        return {
          
   
            checked:true,
        }
    },

多个勾选 （用数组接收）

<input type="checkbox" value="小明" v-model="checkedNames" />
  <label for="小明">小明</label>
  <input type="checkbox" value="小李" v-model="checkedNames" />
  <label for="小李">小李</label>
  <input type="checkbox" value="小陈" v-model="checkedNames" />
  <label for="小陈">小陈</label>

data(){
          
   
        return {
          
   
            checkedNames:[]
        }
    },

v-model单选框 (radio)

<input type="radio" value="One" v-model="picked" />
  <label for="one">One</label>
  <br />
  <input type="radio" value="Two" v-model="picked" />
  <label for="two">Two</label>
  <br />
  <span>Picked: {
          
   {
          
    picked }}</span>

data(){
          
   
        return {
          
   
            picked:
        }
    },

v-model选择框 (Select)

单选

<select v-model="selected">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <span>Selected: {
          
   {
          
    selected }}</span>

data(){
          
   
        return {
          
   
            selected:2,
        }
    },

多选

<select v-model="selecteds" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <span>Selected: {
          
   {
          
    selecteds }}</span>

data(){
          
   
        return {
          
   
            selecteds:[]
        }
    },

修饰符

.lazy

在默认情况下v-model实时更新的，如果不想让他实时更新需添加.lazy修饰符，作用是在事件失去焦点时才会更新

<input v-model.lazy="mag" />

data(){
          
   
        return {
          
   
            mag:mag
        }
    },

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

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

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg" />