Vue学习(十一)-表单绑定 v-model

最新推荐文章于 2024-04-19 16:50:00 发布

狄鸠

最新推荐文章于 2024-04-19 16:50:00 发布

阅读量207

点赞数

分类专栏： Vue框架学习

本文链接：https://blog.csdn.net/weixin_44038881/article/details/103400973

版权

Vue框架学习专栏收录该内容

13 篇文章 1 订阅

订阅专栏

表单绑定 v-model

概述

使用 v-model 指令在，以及元素上面创建数据的双向绑定

什么是双向绑定？就是我们从DOM元素界面修改值也能影响到 Vue 实例里面的数据，类似这样

以前我们只能修改 Vue 实例里面的数据来让DOM进行响应式，不能通过改变DOM的数据让Vue的数据改变

这样写也是不能发生双向绑定

<div id="app">
    <input type="text" :value="message">
    <h3>{{message}}</h3>
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

下面，通过双向绑定，使我们在input表单上直接修改值能影响到 Vue 实例里的数据，从而发生响应式

双向绑定的原理（宏观层面）

给一个input表单进行 input 事件监听

表单的 vales 值发生变化时，触发事件，改变Vue实例里的数据，发生响应式

v-model的本质，本质就是下面这坨代码实现双向绑定的语法糖

<!-- 1. 普通写法 -->
<div id="app">
    <input type="text" :value="message" @input="changeValue">
    <h3>{{message}}</h3>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            changeValue(e) { // 当输入值发生变化，触发事件
                this.message = e.target.value
            }
        }
    })
</script>

<!-- 2. 语法糖写法 -->
<input type="text" :value="message" @input="message = $event.target.value">
<!-- 上面这段代码的本质就是 -->
<input type="text" v-model="message">

核心

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件

使用

`radio`

<!-- 最普通写法 -->
<label for="male">
    <input type="radio" name="sex" value='男' id="male" v-model="sex">男
</label>
<label for="female">
    <input type="radio" name="sex" value='女' id="female" v-model="sex">女
</label>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            sex: '',
        }
    })
</script>

<!-- v-model 可以让我们单选框的name值发生互斥，所以不用写name值 -->
<div id="app">
    <label for="male">
        <input type="radio" value='男' id="male" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" value='女' id="female" v-model="sex">女
    </label>
    <h2>sex的值：{{sex}}</h2>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            sex: '男',		// 这里默认写 男，会相应到DOM里面，value为男的会默认选中
        }
    })
</script>

在这里插入图片描述

`checkbox`

单选框的时候

<div id="app">
    <input type="checkbox" id="agree" v-model="isAgree">
    <label for="agree">同意</label>
    <h3>当前选择的是：{{isAgree}}</h3>
    <button :disabled="!isAgree">下一步</button>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            isAgree: false
        }
    })
</script>

在这里插入图片描述

多选框的时候

<div id="app">
    <input type="checkbox" value="看书" v-model="hobbies">看书
    <input type="checkbox" value="游泳" v-model="hobbies">游泳
    <input type="checkbox" value="跑步" v-model="hobbies">跑步
    <input type="checkbox" value="打游戏" v-model="hobbies">打游戏
    <h3>选择的爱好有：{{hobbies}}</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            hobbies: []
        }
    })
</script>

在这里插入图片描述

`select`

选择一个

<div id="app">
    <select name="fruit" id="" v-model="fruit">
        <option value="杭州">杭州</option>
        <option value="金华">金华</option>
        <option value="萧山">萧山</option>
        <option value="苏州">苏州</option>
        <option value="上海">上海</option>
    </select>
    <h3>您当前选择的是:{{fruit}}</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            fruit: '杭州'
        }
    })
</script>

在这里插入图片描述

选择多个

<div id="app">
    <!-- 选择一个 -->
    <select name="fruit" v-model="fruit" multiple>
        <option value="杭州">杭州</option>
        <option value="金华">金华</option>
        <option value="萧山">萧山</option>
        <option value="苏州">苏州</option>
        <option value="上海">上海</option>
    </select>
    <h3>您当前选择的是:{{fruit}}</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            fruit: []
        }
    })
</script>

在这里插入图片描述

使用v-for 来动态渲染

<div id="app">
    <select v-model='finallyData'>
        <option v-for="item in originalOpt" >{{item}}</option>
    </select>
    <h3>最终的数据是: {{finallyData}}</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            originalOpt: ['杭州', '上海', '北京', '金华'],
            finallyData: '杭州',
        }
    })

在这里插入图片描述

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是被我们写死的，我们可以把值绑定到Vue实例的一个动态属性上

选项里面的数据不能写死，服务器会给我们可选的数据，我们需要动态渲染数据，就是v-bind:value

动态渲染数据

<div id="app">
    <label v-for="item in originOpt">
        <input type="checkbox" name="bool" :value="item" v-model="picked">{{item}}
    </label>
    <h3>{{picked}}</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            picked: [],
            originOpt: ['篮球', '足球', '乒乓球', '羽毛球']
        }
    })
</script>

在这里插入图片描述

修饰符

.lazy

以前把 input 输入框进行双向绑定的时候，只要是输入框发生了 input 事件， Vue 实例里面的 message 就会实时发生变化并进行数据的响应，我们可以添加 .lazy 修饰符来改变表单的监听事件，当我们失去焦点或者回车时候，才会发生双向绑定

如果不想实时发生双向绑定，可以给 v-model 添加 lazy 修饰符：

<div id="app">
    <input type="text" v-model.lazy="message">
    <h3>{{message}}</h3>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
        }
    })
</script>

在这里插入图片描述

.number

我们用 input:number 这个表单时，用户虽然输入的数字，但是传到后台其实是 string字符换

在这里插入图片描述

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<div id="app">
    <input type="number" v-model.number="message">	
    <h3>类型：{{ typeof message}} 值：{{message}}</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 1,
            iptValue: null,
        }
    })

在这里插入图片描述

.trim

用户输入的如果是带空格的字符串。我们可以添加该修饰符来去除

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<div id="app">
    <p>去空格</p>
    <input type="text" v-model.trim="message">
    <h3>值："{{message}}"</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '',
        }
    })

在这里插入图片描述

狄鸠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习(十一)-表单绑定 v-model

表单绑定 v-model概述使用 v-model 指令在，以及元素上面创建数据的双向绑定什么是双向绑定？就是我们从DOM元素界面修改值也能影响到 Vue 实例里面的数据，类似这样以前我们只能修改 Vue 实例里面的数据来让DOM进行响应式，不能通过改变DOM的数据让Vue的数据改变这样写也是不能发生双向绑定<div id="app"> ...
复制链接

扫一扫

专栏目录