vue2.x笔记3-表单绑定v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

<div id="app">
    <!-- 双向绑定 -->
    <input type="text" v-model="msg"> {{msg}}
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '你好'
        }
    })
</script>

v-model原理

v-model其实是一个语法糖,本质上包含两个操作:

  1. v-bind绑定一个value属性
  2. v-on指令给当前的元素绑定input事件
<input type="text" v-model="msg">
<!-- 等同于 -->
<input type="text" :value="msg" @input="msg = $event.target.value"> {{msg}}

v-model:radio

多个单选框

<div id="app">
    <label for="male">
        <input type="radio" id="male" value="男" v-model="sex"> 男
    </label>
    <label for="female">
        <input type="radio" id="female" value="女" v-model="sex"> 女
    </label>
    <h2>您选择的性别是:{{sex}}</h2>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '你好',
            sex: '男'
        }
    })
</script>

 v-model:checkbox

复选框分两种情况:单个勾选框和多个勾选框

单个勾选框:

  • v-model即为布尔值
  • 此时input的value并不影响v-model的值

多个复选框:

  • 因为可以选中多个,所以对应的data中的属性是一个数组
  • 当选中某一个时,就会将input的value添加到数组中
<div id="app">
    <!-- CheckBox单选框 -->
    <label for="agree">
        <input type="checkbox" id="agree" v-model="isAgree"> 同意协议
    </label>
    <h2>您选择的是:{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>

    <!-- CheckBox多选框 -->
    <label for="basketball">
        <input type="checkbox" id="basketball" value="篮球" v-model="hobbies">篮球
    </label>
    <label for="football">
        <input type="checkbox" id="football" value="足球" v-model="hobbies">足球
    </label>
    <label for="ping-pong">
        <input type="checkbox" id="ping-pong" value="乒乓球" v-model="hobbies">乒乓球
    </label>
    <label for="badminton">
        <input type="checkbox" id="badminton" value="羽毛球" v-model="hobbies">羽毛球
    </label>
    <h2>您选择的是:{{hobbies.join()}}</h2>
    
    <!-- 值绑定 -->
    <label v-for="(item, index) in originHobbies" :for="index">
        <input type="checkbox" :value="item" :id="index" v-model="hobbies1">{{item}}
    </label>
    <h2>您选择的是:{{hobbies1.join()}}</h2>

</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '你好',
            isAgree: false, // 单选框
            hobbies: ['篮球', '乒乓球'], // 多选框
            originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '网球', '台球'], // 值绑定
            hobbies1: ['网球']
        }
    })
</script>

 v-model:select

和checkbox一样,select也分单选和多选

单选:只能选中一个值

  • v-model绑定一个值
  • 当选中option中的一个时,会将它对应的value赋值到定义的属性中

多选:可以选中多个值

  • v-model绑定一个数组
  • 当选中多个值时,会将选中的option对应的value添加到数组中
<div id="app">
    <!-- 1、选择一个 -->
    <select v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
        <option value="芒果">芒果</option>
        <option value="橙子">橙子</option>
    </select>
    <h2>您选择的水果是:{{fruit}}</h2>

    <!-- 2、选择多个 -->
    <select v-model="fruits" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
        <option value="芒果">芒果</option>
        <option value="橙子">橙子</option>
    </select>
    <h2>您选择的水果是:{{fruits}}</h2>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '你好',
            fruit: '芒果',
            fruits: []
        }
    })
</script>

 修饰符

lazy修饰符

  • 默认情况下,v-model默认是在input事件中同步输入框的数据
  • 也就是一旦有数据发生改变对应的data中的数据层就会自动发生改变
  • lazy修饰符可以让数据在失去焦点或会车时更新数据

number修饰符

  • 默认情况下,在输入框中无论输入的是字母还是数字都会被当做字符串进行处理
  • 但如果希望处理的是数字类型,那么最好直接将内容当做数字处理
  • number修饰符可以让在输入框中输入的内容自动转成数字类型

trim修饰符

  • 如果输入的内容首尾有很多空格,通常希望将其去除
  • trim修饰符可以过滤内容左右两边的空格
<div id="app">
    <!-- 1、修饰符 lazy -->
    <input type="text" v-model.lazy="msg">
    <h2>内容:{{msg}}</h2>

    <!-- 2、修饰符 number -->
    <input type="number" v-model.number="num">
    <h2>数字:{{num}} 类型:{{typeof num}}</h2>

    <!-- 3、修饰符 trim -->
    <input type="text" v-model.trim="msg1">
    <h2>内容:--{{msg1}}--</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '你好',
            num: 44,
            msg1: ''
        }
    })
</script>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值