您现在的位置是：网站首页> 编程资料编程资料 Vue v-model实现案例介绍_vue.js_ 2023-05-24 324人已围观 简介 Vue v-model实现案例介绍_vue.js_ 目录1. 概述2. 使用方法3. 案例3.1 用户登录3.2 todolist3.3 实现单个复选框3.4 实现多个复选框3.5 实现复选框全选3.6 单选和下拉4. v-model修饰符4.1 lazy4.2 trim4.3 number5. 案例5.1 购物车5.2 购物车持久化1. 概述v-model 是 Vue 提供的一个语法糖，它是 value 值和事件的结合体，它会根据不同的表单项，来选择执行不同的事件。它的作用是，通过和表单元素绑定，实现双向数据绑定，通过表单项可以更改数据。另外，v-model 还可以用于各种不同类型的输入，</code>、<code><select></code> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：</p><ul><li>文本类型的 <code><input></code> 和 <code><textarea></code> 元素会绑定 <code>value</code> property 并侦听 <code>input</code> 事件；</li><li><code><input type="checkbox"></code> 和 <code><input type="radio"></code> 会绑定 <code>checked</code> property 并侦听 <code>change</code> 事件；</li><li><code><select></code> 会绑定 <code>value</code> property 并侦听 <code>change</code> 事件</li></ul><p>v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，而总是将 Vue 实例的数据作为数据来源，应该在 data 选项中声明初始值。</p><p>语法糖：这种语法对语言的功能并没有影响，但是更方便程序员使用</p><p class="maodian"><a name="_label1"></a></p><h2>2. 使用方法</h2><p>在没有使用v-model指令时，我们通过data数据控制表单项中的值，还是麻烦的，需要绑定属性和事件来完成。</p><div class="jb51code"><pre class="brush:js;"><div id="app"><div><input type="text" :value="username" @input="setUsername"></div></div><script> const vm = new Vue({ el: '#app', data: { username: '' }, methods: { setUsername(evt) { this.username = evt.target.value.trim() } } }) </script></pre></div><p style="text-align:center"><img alt="" src="//img.jbzj.com/file_images/article/202209/2022090811563174.png"></p><p>使用 v-model 指令实现上述效果：</p><div class="jb51code"><pre class="brush:js;"><div id="app"><div><input type="text" v-model="username"></div></div><script> const vm = new Vue({ el: '#app', data: { username: '' } }) </script></pre></div><p style="text-align:center"><img alt="" src="//img.jbzj.com/file_images/article/202209/2022090811563175.png"></p><p class="maodian"><a name="_label2"></a></p><h2>3. 案例</h2><p class="maodian"><a name="_lab2_2_0"></a></p><h3>3.1 用户登录</h3><p>使用 v-model 指令，可以很轻松的获取表单中的数据，也可以很轻松地对数据进行修改。</p><div class="jb51code"><pre class="brush:xhtml;"><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习使用</title><script src="./js/vue.js"></script></head><body><div id="app"><div><label> 账号： <input type="text" v-model="username"></label></div><div><label> 密码： <input type="text" v-model="password"></label></div><div><textarea v-model="intro">登录系统
