14~vue中表单输入绑定v-model

vue中表单输入绑定v-model

基本使用

<input v-model="message" />

v-model的原理

v-model原理,本质是两个操作:

• v-bind绑定一个value属性
• v-on给当前元素添加一个input事件

示例

<script>
export default {
  data () {
    return {    
       msg:'你开心就好'
    }   
  },
  methods: {
    changeValue(e){
      this.msg = e.target.value
    }     
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <div>   
    <!-- 
      v-model基本使用
     -->
    <p>msg信息展示:  {{ msg }}</p>
    <p>
      <input type="text" v-model="msg">
    </p>
    <!-- 
      v-model原理,本质是两个操作:
      1. v-bind绑定一个value属性
      2. v-on给当前元素添加一个input事件     
     -->
     <p>
      <input type="text" :value="msg" @input="changeValue">
     </p>
    
  </div>
</template>
<style>
</style>

v-model表单控件的基本使用

文本框input的绑定

<input type="text" v-model="msg">

复选框checkbox

复选框为单个勾选框,v-model绑定的是一个布尔值,

data () {
    return {
       checked:"", // 给一个初始值      
},

<!-- 复选框为单个勾选框, v-model绑定的是一个布尔值,
     勾选了就是true, 没有勾选就是false
      -->
<h1>{{ checked }}</h1>
<input type="checkbox" v-model="checked">

复选框为多个勾选框,v-model绑定的是一个数组

data () {
    return {
       fruits:['西瓜'], //可以默认选中西瓜,也可以不用默认     
},

<!-- 复选框为多个勾选框, v-model绑定的是一个数组,勾选某一个之后,
          就会把对应的input的value值添加到fruits数组中
       -->
<h2>喜欢的水果: {{ fruits }}</h2>
<input type="checkbox" v-model="fruits" value="苹果">苹果
<input type="checkbox" v-model="fruits" value="香蕉">香蕉
<input type="checkbox" v-model="fruits" value="荔枝">荔枝
<input type="checkbox" v-model="fruits" value="西瓜">西瓜

单选框radio

data () {
    return {
       sex:'男'// 初始化默认性别男   
},

<!-- 单选框 -->
<h2>性别--{{ sex }}</h2>
<input type="radio" v-model="sex" value="男">男
<input type="radio" v-model="sex" value="女">女

选项框select

选项框--单选

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

<!-- 选项框--单选 -->
<h2>城市:  {{ city }}</h2>
<select v-model="city">
  <option value="上海">上海</option>
  <option value="北京">北京</option>
  <option value="深圳">深圳</option>
</select>

选项框--多选, select 加上 multiple 属性就是多选了,多选时, 只要按住Ctrl + 鼠标点击对应选项

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

<h2>爱好:  {{ hobby }}</h2>
<select v-model="hobby" multiple>
  <option value="抽烟">抽烟</option>
  <option value="喝酒">喝酒</option>
  <option value="打牌">打牌</option>
</select>

完整示例

<script>
export default {
  data () {
    return {    
       msg:'你开心就好',
       checked:"", // 给一个初始值
       fruits:['西瓜'], //可以默认选中西瓜,也可以不用默认
       sex:'男',// 初始化默认性别男
       city:'深圳',//初始化给一个默认值, 也可以不给, 设置为空字符串
       hobby:[]
    }   
  },
  methods: {
    changeValue(e){
      this.msg = e.target.value
    }     
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <div>   
    <!-- 
      v-model基本使用
     -->
     <!-- 复选框 -->
     <!-- 复选框为单个勾选框, v-model绑定的是一个布尔值,勾选了就是true, 没有勾选就是false -->
     <h1>{{ checked }}</h1>
     <input type="checkbox" v-model="checked">
     <!-- 复选框为多个勾选框, v-model绑定的是一个数组,勾选某一个之后,
          就会把对应的input的value值添加到fruits数组中
       -->
     <h2>喜欢的水果: {{ fruits }}</h2>
     <input type="checkbox" v-model="fruits" value="苹果">苹果
     <input type="checkbox" v-model="fruits" value="香蕉">香蕉
     <input type="checkbox" v-model="fruits" value="荔枝">荔枝
     <input type="checkbox" v-model="fruits" value="西瓜">西瓜
     <!-- 单选框 -->
     <h2>性别--{{ sex }}</h2>
     <input type="radio" v-model="sex" value="男">男
     <input type="radio" v-model="sex" value="女">女
     <!-- 选项框 -->
     <!-- 选项框--单选 -->
     <h2>城市:  {{ city }}</h2>
     <select v-model="city">
       <option value="上海">上海</option>
       <option value="北京">北京</option>
       <option value="深圳">深圳</option>
    </select>
    <!-- 选项框--多选
    select 加上 multiple 属性就是多选了
    多选时, 只要按住Ctrl + 鼠标点击对应选项
    -->
    <h2>爱好:  {{ hobby }}</h2>
     <select v-model="hobby" multiple>
       <option value="抽烟">抽烟</option>
       <option value="喝酒">喝酒</option>
       <option value="打牌">打牌</option>
    </select>
  </div>
</template>
<style>
</style>

v-model修饰符的使用

v-model 有3个修饰符

.lazy 懒加载

懒加载，只有表单元素失去焦点，才会进行双向数据绑定

.number 将输入框的内容自动转化为数字类型

如果表单中输入的内容是以数字开头，则截取数字部分；如果开头就不是数字，那么失效

.trim 去掉首尾空白

完整示例

<script>
export default {
  data () {
    return {    
       msg:'199291',
       count:10,
      
    }   
  },
  methods: {
    downMsg()
    {
      console.log(this.msg)
    }   
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <div>   
    <!-- 
      v-model基本使用
     -->
     <!-- 修饰符的使用 -->
     <!-- 
      .lazy 在默认情况下, v-model 在每次 input 事件触发后, 
      都将输入框的值与数据进行同步; 我们可以添加 .lazy 修饰符, 
      从而转化在 change事件之后进行同步
      -->
     <h1>{{ msg }}</h1>
     <!-- .lazy 当输入框失去焦点, 再去同步输入框中的数据 -->
     <input type="text" v-model.lazy="msg">
     <!-- .number 将输入框的内容自动转化为数字类型 -->
     <h2>输入的值:  {{ count }}</h2>
     <h2>值得类型:  {{ typeof(count) }}</h2>
     <input type="text" v-model.number="count" >
     <!-- .trim 自动过滤用户输入的首位空白字符串 -->
     <h2>msg----{{ msg }}</h2>
     <input type="text" v-model.trim="msg" @keydown="downMsg">  
  </div>
</template>
<style>
</style>