vue v-model 的详细用法

关于v-model的详细用法

首先v-model是vue里面的数据双向绑定（数据双向绑定主要运用底层原理是数据监听，与数据代理）

首先我们使用v-model一般都是用来双向的操作数据，就你在data模板中配置的数据项与页面显示的数据项它是动态更新的，不管哪一方的改变都会导致另一方的改变，有些小伙伴可能有疑问，那页面上的数据我改变了但我看代码data里面没有改变呀，这就涉及到数据代理的知识，你可以看看其实数据已经改变，我们可以看vue开发者工具来看

在我门使用v-model来收集数据是我们一般都是收集html的value值，有些细节可以看以下代码

像input框直接来v-model就能收集到值
像单选框要配备value值
<input type="radio" v-model="SEX" value='nan'> 因为你配备了value值收集的是单选框的值。不配备的话，只能手机true或者false

我们在学vue时学过事件修饰符：prevet (受保护的) once（只执行一次）
其实v-model也有修饰符的：v-model.number 因为有时候我们需要vue接受的类型为数字但就算是我们用原生的html指定为number vue接受的都会转换为带引号的字符串所以用这个修饰就是数字了。v-model其他的修饰符：lazy（失去焦点的时候才会收集数据），trim（不收集空格）

列表过滤用数组.indexof （value）是否包含value这个字母实现过滤

vue v-model 的详细用法相关推荐

vue性能优化-------vendor优化详细用法（瘦身），减小体积，引入cdn
vue性能优化-------vendor优化详细用法(瘦身),减小体积,引入cdn 原创ChrisWang_ 最后发布于2019-05-24 10:25:58 阅读数 1332 收藏展开 vue性 ...
Vue中v-bind,v-on,v-model都是干什么的(区别以及详细用法)?自制动图,一看就懂 ∠( °ω°)／前端知识
文章目录区别详细用法属性绑定(`v-bind:`或`:`) 单值绑定多值绑定绑定style 事件绑定(`v-on`或`@`) 传入event 双向绑定(`v-model`) 双向绑定原理元 ...
laravel model 模型详细基本用法
laravel model 模型基本用法一.定义模型 1.命令 php artisan make:model User 如果你想要在生成模型时生成数据库迁移,可以使用--migration 或-m ...
Element Ui使用技巧——Form表单的校验规则rules详细说明；element的 form 表单rules详细用法
本文章是在项目开发时遇到问题看到的一片好文, 摘录自[博客园]–[逍遥云天]. 感谢作者地址 – https://www.cnblogs.com/xyyt/p/13366812.html 在 [逍遥 ...
Android命令行工具logcat详细用法！
logcat是Android中一个命令行工具,可以用于得到程序的log信息. 见板凳详细说明! 本贴内容来自网络,引用网址为:http://hi.baidu.com/%C9%C1%D2%AB ...
Vue.js-Day03-AM【超级详细：Node.js环境安装、安装淘宝镜像（Win、Mac）、安装Vue脚手架、初始化Vue项目-命令解释（Vscode、命令行窗口）、目录介绍、Vue文件介绍】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Node.js-环境安装 1.1.Node.js-详细安装步骤 2.vue-cli脚手架安装 2.1.安装 ...
Word查找替换详细用法及通配符一览表
转载自:https://www.cnblogs.com/whchensir/p/5768030.html Word查找替换详细用法及通配符一览表使用通配符要查找"?"或者&qu ...
批处理命令之Start的详细用法-P处理打开IE窗口最大化
批处理命令之Start的详细用法 (hxzon:运行"start 文件路径"打开新的命令行窗口,加上"""",即 "s ...
chmod 命令详细用法
chmod 命令详细用法今天看了一下Linux的权限,感觉Linux在权限设置方面要比Windows强很多,这种设计思想值得学习. chmod 命令详细用法 A:指令名称 : chmod ...

vue v-model 的详细用法

vue v-model 的详细用法相关推荐

最新文章

热门文章