vue 第九天 v-model的基本使用
vue 第九天 v-model的基本使用
1、v-model 的基本使用
<!-- v-model 表达式-->
<div id="vue_one">
<input type="text" v-model="message">{{message}}
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {message:""},methods: {delete1(index) {this.book.splice(index, 1);}}})
</script>
2、:value 与 @input 的基本使用
- @input 如果 input 里的值发生变化就会调用@input之间 的方法
- value 拿到下面的数据
<!-- :value 与 @input-->
<div id="vue_one"><input type="text" :value="message" @input="message1"> {{message}}
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one', data: {message: ""}, methods: {message1(event) {this.message += event.data;}}})
</script>
3、:value 与 v-model 的差别
vue 中 v-model = ：value + v-model
v-model 是双向绑定
双向绑定：就是数据和标签双向互关联，一方改动另一方随之改变
:value 只能配合 @input 进行双向绑定否则 单个value的话只能通过提交的数据进行绑定
4、相等
<input type = "text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value ">
5、v-model 与 radio 的绑定
<!-- v-model -->
<div id="vue_one"><input type="radio" v-model="sex" value="男">男<input type="radio" v-model="sex" value="女">女<h1>{{sex}}</h1>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {sex: "女"}})
</script>
6、 v-model 与 checkbox 的绑定
<!-- v-model -->
<div id="vue_one"><input type="checkbox" v-model="hobbies" value="篮球">篮球<input type="checkbox" v-model="hobbies" value="足球">足球<input type="checkbox" v-model="hobbies" value="不知道">不知道<h1>{{hobbies}}</h1>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {hobbies: []}})
</script>
7、v-model 与 select 的绑定
7.1、v-model 选择单个
<!-- v-model -->
<div id="vue_one"><select name="abc" v-model="qwe" id=""><option value="日本">日本</option><option value="美国">美国</option><option value="上海">上海</option></select><h1>{{qwe}}</h1>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {qwe: "上海"}})
</script>
7.2、v-model 选择多个 按 Ctrl 键选择多个
<!-- v-model -->
<div id="vue_one"><select name="abc" v-model="qwe" multiple><option value="日本">日本</option><option value="美国">美国</option><option value="上海">上海</option></select><h1>{{qwe}}</h1>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {qwe: []}})
</script>
8、修饰符
8.1、lazy
可以让数据在失去焦点或者回车时才会更新
<!-- v-model -->
<div id="vue_one"><input type="text" v-model.lazy="qwe"><h1>{{qwe}}</h1>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {qwe: ""}})
</script>
8.2、number
让输入框中输入的数字类型 自动转化成数字类型
<!-- v-model -->
<div id="vue_one"><input type="number" v-model.number="qwe"><h1>{{qwe}}</h1>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {qwe: ""}})
</script>
8.3、trim
trim修饰符可以过滤内容左右两边的空格
<!-- v-model -->
<div id="vue_one"><input type="text" v-model.trim="qwe"><h1>{{qwe}}</h1>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {qwe: ""}})
</script>
9、过滤器 filters
过滤器就是过滤一些我们不需要的，给出我们需要的进行展示
<div id="div1"><ul><li v-for="item in person">姓名：{{item.name}}------------年龄：{{item.age}}---------------身高：{{item.stature | filterStature}}</li></ul>
</div>
<script type="text/javascript">// filters 过滤 过滤掉大部分的小数，保留两位小数// toFixed js方法四舍五入过滤小数点let vue = new Vue({el: "#div1",data: {person: [{name: "张三",age: 34,stature: 176.789}, {name: "李四",age: 15,stature: 172.621}, {name: "马六",age: 21,stature: 180.5315}]},filters: {filterStature(stature){return stature.toFixed(2);}}});
</script>
花开一千年,花落一千年,花叶永不见
vue 第九天 v-model的基本使用相关推荐
- Vue的MVVM（model、view、viewmodel）
MVVM模式:M(model)+ V(view)+ VM(viewmodel)与 MVC模式:M(model).V(view).C(controller)相类似 MVC: 用户向controller层 ...
- vue + ts 项目中Model的用法
要使vue支持ts写法,我们需要用到vue-property-decorator,这个组件完全依赖于vue-class-componet 首先安装: npm i -D vue-property-dec ...
- 什么是V Model(V模型)
v-model是一种软件生存期模型,由Paul Rook在1980年率先提出的,在1990年出现在英国国家计算中心的出版物中,旨在提高软件开发的效率和有效性,是我们熟知的瀑布模型的一种改进,瀑布模型( ...
- vue组件通信v兄弟组件通信eventbus遇到的问题（多次触发、第一次不触发）
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: 1 <tem ...
- Typescript，Vue you enjoy it ?
前言 听说typescript最近越来越流行,借着开启新项目,用vue + typescript尝试了下.夏日炎炎,趁着乘凉的略微时间,进行一下项目总结,望大佬们多多指点! 项目配置 初始化 vue- ...
- Vue深入学习4—指令和生命周期
1.Vue是怎么识别 v- 指令的? 首先将HTML结构解析成属性列表,存入到数组中,接着遍历数组中的每一个节点,获取到不同指令对应的方法. // 将HTML看作真正的属性列表 var ndoeAtt ...
- vue 按钮删除input内容_Vue表单和v-model
一.基本用法 1.文本 <input v-model="message" placeholder="edit me"> <p>Messa ...
- vue.js 表单 v-text
v-text可以替代{{}} <!DOCTYPE html> <html lang="en" xmlns:v‐on="http://www.w3.org ...
- vue.js v-model
v-model可以实现view和model的双向绑定,所以名字v(view)-model(model) <!DOCTYPE html> <html lang="en&quo ...
- Vue详细介绍及使用
Vue详细介绍及使用 一.Vue定义及简介 1.Vue定义 关于Vue简介,百度百科给出的解释是:Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设 ...
最新文章
- c语言表现一些简单的图片,C语言的一些简单例题.doc
- 面试题：聊一聊设计模式的基本原则
- linux MISC 驱动模型分析
- java 方法调用表达式_java lambda怎么表达式判断被调用接口名称和接口中方法
- 软件有打印按钮，能够直接打印出来。手机上有三星的共享打印组件。
- Scratch少儿编程案例~走迷宫游戏
- Android基础篇 读取 Assets 文件夹中的文件
- pytorch RuntimeError: size mismatch, m1: [16 x 86016], m2: [25088 x 512] at /opt/conda/conda-bld/pyt
- 系统分析员到底做什么？
- Bootstrap栅格参数
- cad绘制正八边形_CAD怎么画正八边形 看完你学会了么
- Android studio一直卡在Gradle:Build Running的解决方法
- 图像质量评价及率失真性能曲线绘制
- python量化交易第五章
- 浅谈什么是web应用防火墙（WAF）
- 前后端分离模式下前端与后端数据交互
- Cocos2d如何实现MVC
- 一、简单的http抓包(微信公众网页登录模拟)
- TCP/IP协议就是这个玩意（不看也不影响拿到50K！但是程序员应该知道这些）持续更新中
- jpa 报错:No EntityManager with actual transaction available for current thread - cannot reliably proce