vue.js基础学习（v-model表单控件与修饰符）

基础入门：vue.js v-model表单控件与修饰符

1、v-model表单控件与修饰符

• v-model 的使用，<input type="text" v-model="msg">；

• v-model的实现原理，<input type="text" :value="msg" @input="chengeValue"><br>；

  • v-bind 绑定一个value属性

  • v-on 给当前元素添加一个input事件

• 单个复选框 绑定的值为bool值，<input type="checkbox" v-model="check">；

• 选项框
  • 单选、多选
• 修饰符的使用
  • .lazy：当输入框失去焦点时同步我们的数据，<input type="text" v-model.lazy="msg">；
  • .number：将输入框的内容自动转为数字类型，<input type="text" v-model.number="number">；
  • .trim：自动过滤首尾空白字符，<input type="text" v-model.trim="msg" @keydown="downChange">； 

源代码：

<script>
  export default{
    data(){
      return{
        msg:'你好，世界！',
        check:true,
        fruits:[],
        sex:'man',
        city:'北京',
        citys:[],
        number:0
      }
    },
    methods:{
      chengeValue:function(e){
        console.log(e)
        this.msg=e.target.value

      },
      downChange:function(){
        console.log(this.msg)
      }
    }
  }
</script>

<template>
<!-- v-model 的使用 -->
  <input type="text" v-model="msg">
  <h2>{{msg}}</h2>
  <!-- v-model的实现原理 -->
  <!-- 
    1、v-bind 绑定一个value属性
    2、v-on 给当前元素添加一个input事件
   -->
   <input type="text" :value="msg" @input="chengeValue"><br>
   <!-- 单个复选框 绑定的值为bool值 -->
   <input type="checkbox" v-model="check">
   <h2>{{check}}</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>{{fruits}}</h2>
    <!-- 单选框 -->
     <input type="radio" v-model="sex" value="man">男
     <input type="radio" v-model="sex" value="woman">女
     <h2>{{sex}}</h2>
     <!-- 选项框 -->
     <!-- 单选 -->
      <select name="" id="" v-model="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="南京">南京</option>
        <option value="重庆">重庆</option>
      </select>
      <h2>{{city}}</h2>
      <!-- 多选 -->
      <select name="" id="" v-model="citys" multiple>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="南京">南京</option>
        <option value="重庆">重庆</option>
      </select>
      <h2>{{citys}}</h2>
      <!-- 修饰符的使用 -->
      <!-- .lazy：当输入框失去焦点时同步我们的数据 -->
      <input type="text" v-model.lazy="msg">
      <h2>{{msg}}</h2>
      <!-- .number：将输入框的内容自动转为数字类型 -->
      <input type="text" v-model.number="number">
      <h2>{{typeof number}}</h2>
      <!-- .trim：自动过滤首尾空白字符 -->
      <input type="text" v-model.trim="msg" @keydown="downChange">
      <h2>{{msg}}</h2>

</template>

<style>
 
</style>

源代码运行情况：