v-model基本用法

输入框

<template>
    <div>
      <input v-model="message" /> //绑定
      {{message}}
      <button @click="message='frank'">set message</button> //点击修改值为frank
  </div>  
</template>
<script>
export default{
    name:'app',
  data(){
      return{
        message:'hi'
    }
  },
  components:{}
}        
</script>

复选框

<template>
    <div>
      <label>
          <input type="checkbox" v-model="x" :value="1"/> //绑定,这里: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>  
</template>
<script>
export default{
    name:'app',
  data(){
      return {
        x:[] //数据,注意是数组
    }
  },
  components:{}
}        
</script>

radio,虽然不加name也可以只选一个，但还是加一下比较好

<template>
    <div>
      <label>
          <input type="radio" name="radio1" v-model="x" :value="1"/> //绑定,这里:value后面是数字，所以有:
      <span>抽烟</span> //显示
      </label>
        <label>
          <input type="radio" name="radio1" v-model="x" :value="2"/> //绑定
      <span>喝酒</span> //显示
      </label>
        <label>
          <input type="radio" name="radio1" v-model="x" :value="3"/> //绑定
      <span>烫头</span> //显示
      </label>
  </div>  
</template>
<script>
export default{
    name:'app',
  data(){
      return {
        x:'' //数据
    }
  },
  components:{}
}        
</script>

select，选择一个option，x就会显示1或2或3

<template>
    <div>
      {{x}}
      <select mutiple v-model="x"> //mutiple是可以同时多选
        <option value>-</option>
            <option v-for="item in array" :value="item.value" :key="item.value">{{item.text}}</option>
    </select>
  </div>  
</template>
<script>
export default{
    name:'app',
  data(){
      return {
      array:[
        {text:'抽烟',value:1},
        {text:'喝酒',value:2},
            {text:'烫头',value:3}
      ],
        x:[] //多选，所以这里是[]，不然就是个空字符串即可
    }
  },
  components:{}
}        
</script>

form，加了

标签和button，输入框在焦点时，按回车就提交了

<template>
    <div>
      <form>//加这个标签
          <label>
              <span>用户名</span>
                <input type="text" v-model="user.username" />
          </label>
            <label>
              <span>密码</span>
                <input type="password" v-model="user.password" />
          </label>
            <button>登录</button>//加这个标签
      </form>
  </div>  
</template>

如果想不刷新，只保存。监听submit事件，触发自己的方法

<template>
    <div>
      <form @submit.prevent="onSubmit">//加这个,prevent是阻止动作
          <label>
              <span>用户名</span>
                <input type="text" v-model="user.username" />
          </label>
            <label>
              <span>密码</span>
                <input type="password" v-model="user.password" />
          </label>
            <button>登录</button>
      </form>
  </div>  
</template>
<script>
export default {
    name:'App',
  data(){
      return{
        user:{
          username:"",
        password:""
      }
    }
  },
  methods:{
      onSubmit(){
        console.log(this.user) //打印出user
    }
  }
}          
</script>

三个修饰符，做辅助

.lazy修饰符

v-model.lazy="user.username"

这样输入时，就不会同步，离开输入框焦点时才会

.number

只需要数字部分时，用这个
例如s0123d,同步出来的就是123

v-model.model="user.username"

.trim

去掉前后空格

v-model.trim="user.username"

v-model详解

v-model相当于代替了这个
App.vue

<input type="text" :value="user.username" @input="user.username = $event.target.value" />

被v-model代替的例子，自己封装一个input：
MyInput.vue

<template>
    <div>
      <input :value="value" @input="oninput" /> //这里的oninput对应methods中的oninput
  </div>  
</template>
<script>
export default{
    name:'MyInput',
  props:{
      value:{
        type:String
    }
  },
  methods:{
      onInput(e){
        const value = e.target.value
      this.$emit('input',value) //发value出去
    }
  }
}      
</script>

App.vue

<template>
    <MyInput :value="user.username" @input="user.username = $event" />//接收子组件发出来的value
</template>
<script>
import MyInput from './MyInput.vue'
export default {
    name: 'App',
    components: {
        MyInput
    },
    data() {
        return {
            user: {
                username: ""
            }
        }
    },
}
</script>

上面例子，不写methods的方式来做，但一般还是不使用这个方式
MyInput.vue

<template>
    <div>
      <input :value="_value" @input="_value"=$event.target.value /> //原生版的
    <input :value="_value" @input="_value"=$event /> //自定义组件版的
  </div>  
</tempalate>
<script>
export default {
    name:'MyInput',
  props:{
      value:{
        type:String
    }
  },
  computed:{
      _value:{
        get(){
          return this.value
      },
      set(newValue){
          this.$emit("input",newValue)
      }
    }
  }
}      
</script>

资料来源：饥人谷

web前端