1、v-model基本使用

2、三种方式实现双向绑定

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><!-- 方式1：v-model双向绑定 --><!-- <input type="text" v-model="message"> --><!-- 方式2：使用方法获取event中的值 --><!-- <input type="text" :value="message" v-on:input="valueChange"> --><!-- 方式3： --><input type="text" :value="message" @input="message = $event.target.value"><h2>{{message}}</h2></div><script src="../js/vue.js"></script><script>var vm = new Vue({el: '#app',data: {message:'你好'},methods: {valueChange(event){this.message = event.target.value;}}});</script>
</body></html>

3、v-model原理

4、v-model结合radio类型使用

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><label id="male"><input type="radio" id="male" value="男" v-model="gender">男</input></label><label id="female"><input type="radio" id="female" value="女" v-model="gender">女</input></label><h2>您选择的性别是：{{gender}}</h2></div><script src="../js/vue.js"></script><script>var vm = new Vue({el: '#app',data: {message:'你好',gender: '男'},methods: {}});</script>
</body></html>

5、v-model结合checkbox类型

5.1、单个复选按钮

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><label id="agree"><input type="checkbox" id="agree" v-model="isAgree">同意协议</input><h2>你的选择是：{{isAgree}}</h2></h2><button :disabled="!isAgree">下一步</button></label></div><script src="../js/vue.js"></script><script>var vm = new Vue({el: '#app',data: {message:'你好',isAgree: false},methods: {}});</script>
</body></html>

5.2、多个复选按钮

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><!-- checkbox多选框 --><label id="hobbies"><input type="checkbox" value="篮球" v-model="hobbies">篮球</input><input type="checkbox" value="足球" v-model="hobbies">足球</input><input type="checkbox" value="排球" v-model="hobbies">排球</input><input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球</input></label><h2>您的爱好是：{{hobbies}}</h2></div><script src="../js/vue.js"></script><script>var vm = new Vue({el: '#app',data: {message:'你好',hobbies: []},methods: {}});</script>
</body></html>

6、v-model:select

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><!-- 1、选择一个 --><select id="abc" name="" v-model="fruit"><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="榴莲">榴莲</option><option value="葡萄">葡萄</option></select><h2>您选择的水果是：{{fruit}}</h2><!-- 1、选择多个 --><select id="abc" name="" v-model="fruits" multiple><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="榴莲">榴莲</option><option value="葡萄">葡萄</option></select><h2>您选择的水果是：{{fruits}}</h2></div><script src="../js/vue.js"></script><script>var vm = new Vue({el: '#app',data: {message:'你好',fruit: '苹果',fruits: []},methods: {}});</script>
</body></html>

7、input中的值绑定

8、v-model中的修饰符lazzy/number/trim

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><!-- 1、懒加载，当鼠标从输入框中失去焦点，或者在输入框中点击回车时才会进行双向绑定 --><input type="text" v-model.lazy="message"/><h2>{{message}}</h2><!-- 2、修饰符：number --><input type="number" v-model.number="age"/><h2>{{age}}---{{typeof age}}</h2><!-- 3、修饰符：trim --><input type="text" v-model.trim="name"/><h2>您输入的值为：{{name}}</h2></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {message:'你好',age: 0,name: ''},methods: {}});</script>
</body></html>

v-model的使用相关推荐

什么是V Model(V模型)
v-model是一种软件生存期模型,由Paul Rook在1980年率先提出的,在1990年出现在英国国家计算中心的出版物中,旨在提高软件开发的效率和有效性,是我们熟知的瀑布模型的一种改进,瀑布模型( ...
【全文翻译】ML-Leaks: Model and Data Independent Membership Inference Attacks and Defenses on Machine.....
ML泄漏:基于机器学习模型的模型和数据无关的成员推理攻击与防御 I. INTRODUCTION II. PRELIMINARIES(准备工作) A. Membership Inference Agai ...
backbone学习总结（二）
今天来看下backbone的路由控制的功能.其实个人感觉backbone,模块就那么几个,熟悉它的框架结构,以及组成,就差不多. 废话不多说,我们来看看还剩下的功能. 关于路由和历史管理通过 Bac ...
Backbone学习日记[1]：感性认识
2019独角兽企业重金招聘Python工程师标准>>> 使用backbone.js的意义是什么呢? Backbone将数据呈现为模型, 你可以创建模型.对模型进行验证和销毁,甚至将它 ...
七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理
系列文章七天学会ASP.NET MVC (一)--深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)--ASP.NET MVC 数据传递七天学会ASP.NET MVC (三)- ...
yii 全选 php,yii2中gridview使用技巧小结(四）——全选等批量操作
在用gridview时,大家都注意到了,列表的开头有现成的复选框,这肯定是批量操作中用到的,今天就来介绍一下,gridview中的批量操作,简直简单的不行,效果图如下: 前端页面只需要改这几个地方即可 ...
【深度学习】Ivy 开源框架，深度学习大一统时代到来？
它来了,它带着统一主流深度学习框架的接口来了.最近,有一个开源的框架:IVY,它将几个主流的深度学习框架都做了一个统一的封装,包括 PyTorch.TensorFlow.MXNet.Jax 和 Num ...
ElementUI弹出新增窗口
新建按钮绑定单击事件,对应的处理函数为handleCreate <el‐button type="primary" class="butT" @click ...
easyui根据select下拉框内容更新表单内容_10、表单与v-model
目标: 学会在表单类元素上使用 v-model . v-model作用:用于在表单类元素上实现双向绑定. 一.input 和 textarea <div id="app&quo ...
【jquery模仿net控件】初步GridView模型实现，及其简单应用
最近日子不好过,主要原因是要毕业了,学校那边的毕业论文让人很头痛,就跟写八股文似的,个人非常头疼并且厌恨这种对我无意义的东西,哎!!!体制啊,既然无法改变,何不将之做好呢!!!对,于是我还是不想写论 ...

v-model的使用

v-model的使用

1、v-model基本使用

2、三种方式实现双向绑定

3、v-model原理

4、v-model结合radio类型使用

5、v-model结合checkbox类型

5.1、单个复选按钮

5.2、多个复选按钮

6、v-model:select

7、input中的值绑定

8、v-model中的修饰符lazzy/number/trim

v-model的使用相关推荐

最新文章

热门文章