03-学习vue笔记分享-v-model数据双向绑定

最新推荐文章于 2023-06-11 10:37:59 发布
最新推荐文章于 2023-06-11 10:37:59 发布
阅读量155 收藏
点赞数
分类专栏： vue.js 学习知识分享 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42647901/article/details/107304946
版权
  1. 可以使用v-model指令的元素有哪些（至少列举出5个表单元素）？

Input、textarea、radio、checkbox、select、

2.v-model：可以实现 表单元素和 Model 中数据的双向数据绑定，注意：v-model 只能运用在 表单元素中；

1、基本使用：

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                message: "hello"
            },
            methods: {}
        });
    </script>
</body>

 

2、原理：

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <!-- <input type="text" v-model="message"> -->
        <input type="text" v-model="message" @input="valueChange">
        <input type="text" v-model="message" @input="message = $event.target.value">
        <h2>{{message}}</h2>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                message: "hello"
            },
            methods: {
                valueChange(event) {
                    this.message = event.target.value;
                }
            }
        });
    </script>
</body>

分析：

1、input框有个input事件，用于监听用户输入的内容

2、绑定的事件需要加一个event参数保证运行成功

3、v-model其实是一个语法糖，背后包含俩个操作：

（1）v-bind绑定一个value属性

（2）v-on指令给当前元素绑定input事件

3、v-model搭配radio使用

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <!-- label确保点击文字也可以选中radio，为保证选择男女不能同时，可以加个name="sex"。相同name则会互斥，而value则是为了获取选择的值,默认选择男，sex双向绑定则会根据value刷新页面 -->
        <label for="male">
            <!-- <input type="radio" id="male" name="sex" value="男" v-model="sex">男 -->
            <!-- 当有v-model时可以不用加name保证俩个radio的互斥 -->
            <input type="radio" id="male" value="男" v-model="sex">男
        </label>
        <label for="female">
            <!-- <input type="radio" id="female" name="sex" value="女" v-model="sex">女 -->
            <!-- 当有v-model时可以不用加name保证俩个radio的互斥 -->
            <input type="radio" id="female" value="女" v-model="sex">女
        </label>
        <p>你的选择是：{{sex}}</p>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                sex: "男"
            },
            methods: {}
        });
    </script>
</body>

 

 4.1、v-model搭配checkbox使用(单个checkbox)

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <h2>你选择的是：{{isAgree}}</h2>
        <button :disabled="!isAgree">下一步</button>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                isAgree: false,
            },
            methods: {}
        });
    </script>
</body>

 

4.2、v-model搭配checkbox使用(多个checkbox)

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <input type="checkbox" id="agree" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" id="agree" value="足球" v-model="hobbies">足球
        <input type="checkbox" id="agree" value="羽毛球" v-model="hobbies">羽毛球
        <input type="checkbox" id="agree" value="乒乓球" v-model="hobbies">乒乓球
        <h2>你选择的是：{{hobbies}}</h2>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                hobbies: []
            },
            methods: {}
        });
    </script>
</body>

 

分析：

1、单个勾选框，v-model绑定的是布尔值，此时input中的value不影响v-model的值

2、多个复选框，因为可以选择多个，所以对应的data中的属性是一个数组，当选择某一个时，会将input的value添加到数组中

 

5、v-model搭配select使用

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <!-- 单选 -->
        <select name="abc" v-model="fruit">
            <option value="苹果">苹果</option>
            <option value="葡萄">葡萄</option>
            <option value="香蕉">香蕉</option>
            <option value="西红柿">西红柿</option>
        </select>
        <h2>你选择的是：{{fruit}}</h2>

        <!-- 多选 -->
        <!-- multiple是拉选不是点选 -->
        <select name="abc" v-model="fruits" multiple>
            <option value="苹果">苹果</option>
            <option value="葡萄">葡萄</option>
            <option value="香蕉">香蕉</option>
            <option value="西红柿">西红柿</option>
        </select>
        <h2>你选择的是：{{fruits}}</h2>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                fruit: "香蕉", //单选 字符串类型 
                fruits: [] //多选 数组类型
            },
            methods: {}
        });
    </script>
</body>

分析：

1、单选：绑定的是一个值（字符串），当我们选择option中的一个时，会将它对应的value赋值到data的fruit中；

2、多选：绑定的是一个数组，当拉选多个值时，会将它对应的value赋值到data的fruits中；

 

6、input中的值绑定

我们在真实开发中，不是将数据写死的，而是动态绑定获取的，因此，上文多个checkbox可做以下更改：

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <input type="checkbox" id="agree" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" id="agree" value="足球" v-model="hobbies">足球
        <input type="checkbox" id="agree" value="羽毛球" v-model="hobbies">羽毛球
        <input type="checkbox" id="agree" value="乒乓球" v-model="hobbies">乒乓球
        <h2>你选择的是：{{hobbies}}</h2>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                hobbies: []
            },
            methods: {}
        });
    </script>
</body>

 改进：

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <input type="checkbox" id="agree" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" id="agree" value="足球" v-model="hobbies">足球
        <input type="checkbox" id="agree" value="羽毛球" v-model="hobbies">羽毛球
        <input type="checkbox" id="agree" value="乒乓球" v-model="hobbies">乒乓球
        <h2>你选择的是：{{hobbies}}</h2>

        <label v-for="item in originHobbies" :for="item">
            <input type="checkbox" :value="item" v-model="hobbies" :id="item">{{item}}
        </label>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                hobbies: [],
                originHobbies: ["篮球", "足球", "羽毛球", "乒乓球", "台球"]
            },
            methods: {}
        });
    </script>
</body>

分析：

v:bind值绑定，：for=“item”和：id=“item”是为了确保每个for跟每个id代表的input对应起来！

因此，input中的值绑定，也就是想说v-bind的值绑定

 

7、v-model的修饰符

 1、lazy修饰符：

默认情况下数据的双向绑定是一旦input框的值发生变化data的数据会自动更新，而该修饰符会让数据在失去焦点或者回车的时候才更新数据，简称懒加载！

2、number修饰符：

默认情况下，input输入的数字是字符串类型，而当我们需要在数字输入框内处理的是数字类型，，则加.number可以在输入框中输入内容时自动转换为数字类型

3、trim修饰符：

可以去除输入框中输入内容首尾的空格

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app">
        <label for="1">
            <input type="text" id="1" v-model="message">
            <input type="text" id="1" v-model.lazy="message">
        </label>
        <h2>当前内容：{{message}}</h2>

        <label for="2">
            年龄：<input type="number" id="2" v-model="age">
            年龄：<input type="number" id="2" v-model.number="age">
        </label>
        <h2>年龄：{{age}} 类型：{{typeof age}}</h2>

        <label for="3">
            <input type="text" id="3" v-model="message">
            <input type="text" id="3" v-model.trim="message">
        </label>
        <h2>当前内容：-----{{message}}-----</h2>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                message: "hello",
                age: 13
            },
            methods: {}
        });
    </script>
</body>

 1、lazy修饰符实例：

 2、number修饰符实例：

3、trim修饰符实例：

 

 

可见得message不加修饰符后面的空格还在！

 

 

补充：

  1. Vue中过滤器的用法？经过过滤器处理后，会不会改变数据的原始值？多个过滤器是否可以串联？当全局过滤器和局部过滤器重名时，会采用全局还是局部过滤器？

定义：对内容或数据进行过滤(二次处理)的一种方式
写法：Vue.filter("过滤器名称",过滤方式);
使用：过滤器类似于管道流
种类：局部过滤器和全局过滤器

全局过滤器定义：

Vue.filter('replaceStr', function(msg) {

          // replace()方法：替换字符串中敏感词汇，用*替换掉敏感词

          return message.replace(/毛病/g, '**')

      });

局部过滤器：

//定义私用局部过滤器。只能在当前 vue 对象中使用

            filters: {

                strDeal(str) {

                    let arr = [];

                    if (str.includes("呱")) {

                        arr.push(str+"可爱的小青蛙");

                        return arr.join("");

                    }

                }

            }

注意：

过滤器实质不改变原始数据

当局部过滤器与全局过滤器名称相同时，就近原则来调用，即局部过滤器优先于全局过滤器被调用；

一个表达式可以使用多个过滤器；

过滤器之间需要用管道符“|”隔开。其执行顺序从左往右；

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

柯柯来康康
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
10-17
在Vue.js中，`v-model`指令是实现数据双向绑定的关键，它允许开发者轻松地在视图和模型之间同步数据。在表单控件如输入框、文本域、单选按钮、复选框等元素上使用`v-model`，可以实现实时更新数据，极大地简化了前端...
Vue双向绑定v-model及双向绑定修饰符
lienze.tech
12-06 993
前言 这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题 于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。 微信小程序搜索：Python面试宝典 或可关注原创个人博客：https://lienze.tech 也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习 双向绑定 v-model 使
15、双向绑定v-model的修饰符
分享java学习路上的一些笔记，不足之处多多见谅。
06-11 84
trim去除我们首尾的空格（自动去除我们的首尾空格（中间的空格他是不会管的））
input实时监听value change
weixin_30597269的博客
11-18 899
要即时的监听输入框(input,textarea)内容的变化,有一下几种方法 keydown,keypress,keyup事件 　　这些事件监听不了右键的复制，剪切和粘贴这些操作，在某些版本的浏览器中也会失效 change事件 　　　　　　　　　　1. 当对象属性改变，并且是键盘或者鼠标激发的，脚本触发无效 　　　　　　　　　　　...
如何让手动设置input的value时,触发change事件
yin_you_yu的博客
10-28 1637
<input id="input"> input.value = 'xxx'; // 手动触发change事件 input.dispatchEvent(new CustomEvent('change'));
Vue-05-v-model 双向绑定
wsssq_的博客
04-23 3148
表单绑定 v-model 、值绑定、v-model 修饰符
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
Vue学习笔记之表单输入控件绑定
12-11
在Vue中，表单输入控件的绑定是一个核心特性，它允许双向数据绑定，使得视图层和应用数据模型之间能够实时同步。本篇笔记将详细讲解Vue中的表单输入控件绑定。 1. **基础用法** - 单行文本输入：`<input v-model=...
Vue.js第一天学习笔记（数据的双向绑定、常用指令）
12-29
在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。并且v-model指令只能用于:<input>、<select>、<textarea>这三种标签。 <div class=form-inline> <div class=form-group> <
vue基础教学（5）
Taojia9958的博客
05-25 524
一、v-for循环 <body> <div id="app"> <ul> <!-- <li v-for="item in names">{{item}}</li> <li v-for="(item,index) in names" :key="index">{{item}}--{{index}}</li> --> <li v-for="(item,key,index)
v-model的双向数据绑定实现原理（附：案例和项目实例）
您的博客
03-11 1万+
一. 前言。 相信对使用vue框架的童靴来说，v-model的使用都能信手沾来，熟悉的不能再熟悉，也都知道v-model其实是个语法糖。不过其究竟是怎么实现的双向数据绑定，很大一部分童靴还是心存疑虑。本文就根据最简单的案例和基于实际项目中最常用的实例来从两个角度讲解v-model的前世今生。 二. v-model的前世今生。 目前的几大主流MVC(VM)框架都实现了单向数据绑定。简而言之，vue中的v-model无非就是在单向数据绑定的基础上给对应表单元素（input、select等）添加了(in
vue与elementUI电商后台管理系统笔记06
00年女程序员分享自己的学习笔记
07-18 711
# 用户列表开发 ## 表格中Boolean值渲染成开关按钮 ### **作用域插槽**实现数据分页效果监听switch开关状态信息es6 模板字符串实现搜索功能实现可清空input实现添加用户的功能dialog对话框对话框中渲染一个表单自定义校验规则添加用户表单重置添加用户的预验证功能发起请求添加一个新用户实现用户信息修改操作根据ID查询用户信息绘制修改用户的表单 完成删除用户操作完成删除用户操作提交用户列表功能代码到码云...
v-model双向绑定原理_vue面试题解析：数据双向绑定原理
weixin_39907526的博客
11-20 6944
在现在web前端面试过程中，如果面试了vue，很多面试官会问面试者：vue中数据双向绑定的原理是什么？那么本文也是围绕这一个核心来讲。vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，其中比较关键的是数据劫持，下面咱们看一个例子。var obj = {}Object.defineProperty(obj,'name',{ get:function(){ co...
Vue的el-pagination组件，current-page 绑定的数据变了，但是页面当前页码并没有变的问题[已解决]
寒夜二十五
05-03 7651
今天用Vue写页面的分页时发现了一个问题,在这里记录下,也希望可以帮助其他人. 问题如下,我在一个页面比如点击第三页(数字3)时,显示第三页绑定的数据正常,但是当我点击一个其他的页面,这个新的页面绑定的数据在分页后也会直接显示第三页的数据,不是从第一页开始的. 解决方法: 1.使用:current-page.sync <el-pagination class="tc m...
解决element 分页组件，搜索过后current-page 绑定的数据变了，但是页面当前页码并没有变的问题
热门推荐
JCat的博客
05-09 1万+
前言 上一篇写前台解决分页问题的时候没有这个问题，但是在实际项目后台中有遇到过，所以在这里专门说一下，如果参考前台分页出现这种问题了，也可以使用这种方法！ bug：vue和element实现的后台分页，当前是第二页，点击搜索，强制设置current-page为1，但是当前页还是第二页没有改变。 解决方法 如何使用分页就不说了，可以参考上一篇的前台解决分页 页面 el-pagination v-i...
vue radio双向绑定_Vue入门系列：六 v-model 之双向数据绑定
weixin_39736606的博客
11-25 185
vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。v-model 之 input Vuejs {{ msg }} Vue入门系列：六 v-model 双向数据绑定 input页面输出Vue入门系列：六 v-model 双向数据绑定解析:v-mod...
Vue checked使用双向数据绑定控制数据中的布尔值
weixin_34406086的博客
06-11 1258
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
一个页面中放置两组单选按钮，需要互不影响
qq_45800951的博客
10-27 1749
两组v-model的参数需要设置不一致
vue radio双向绑定_vue自定义组件v-model几种实现方法，拿走不谢
weixin_39526651的博客
11-25 636
### v-model机制详解我们都知道vue的双向数据绑定，当你改变它的值时，视图层就跟着变化。```vue```其实它只是语法糖，主要是通过input事件来触发input标签value值来实现我们说的“双向数据绑定”,其实它还是单向数据流。上面的实际相当于```vue$emit('input', v)/>```#### 在自定义组件中使用v-model的几种方法我们在封装输入框input...
v-model修饰符笔记
最新发布
02-23
v-model 修饰符是 Vue.js 框架中用于实现双向数据绑定的一种方式。它可以简化表单元素与 Vue 实例数据之间的交互，使得数据的更新更加方便和高效。 v-model 修饰符有以下几种常见的用法： 1. .lazy 修饰符：默认...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值