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" />