vue---v-model的详细解答
2024-09-07 00:00:02
1、v-model：双向数据绑定的实现原理 等同于一个 v-bind 加 v-on
<div id="app">
<!-- <input type="text" v-model="message"> -->
<input type="text" :value="message" @input="message=$event.target.value">
<h2>{{message}}</h2>
</div>
2、v-model 结合radio类型的使用
<label for="man">
<input type="radio" id="man" value="男" v-model="sex">
</label>
<label for="Wman">
<input type="radio" id="Wman" value="女" v-model="sex">
</label>
<h2>你选择的性别是：{{sex}}</h2>
3、v-model结合checkbox的使用
1、单选框
<!-- checkbox 单选框 -->
<label for="agree">
<input type="checkbox" id="agree" v-model="ischange">同意协议
</label>
<h2>你选择的是:{{ischange}}</h2>
<button :disabled="!ischange">下一步</button><br><br><br>
2、多选框
<!-- checkbox 多选框 -->
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<input type="checkbox" value="兵乓球" v-model="hobbies">兵乓球
<input type="checkbox" value="排球" v-model="hobbies">排球
<h2>你的爱好是：{{hobbies}}</h2>
4、v-model结合select的使用
1、单选框
<!-- select 单选 -->
<select name="" id="" v-model="fruit">
<option value="西瓜">西瓜</option>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="草莓">草莓</option>
</select>
<h2>你选择的水果是：{{fruit}}</h2><br><br>
2、多选框
<!-- select 多选 -->
<select name="" id="" v-model="fruits" multiple>
<option value="西瓜">西瓜</option>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="草莓">草莓</option>
</select>
<h2>你选择的水果是:{{fruits}}</h2>
5、值绑定 ：动态绑定Value的值
<!-- 值绑定 -->
<label :for="item" v-for="item in fruitHobbies">
<input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
</label>
6、v-model修饰符的使用
1、lazy 作用：当文本框失去焦点或按 enter 的时候，v-model 才会执行变量的更新
<!-- 1、lazy修饰符 -->
<label for="active">
<input type="text" id="active" v-model.lazy="message">
</label>
<h2>{{message}}</h2>
2、number 作用：把数据类型转换乘Number类型
<!-- 2、number修饰符 -->
<!-- 当type的类型为number类型的时候，v-model绑定的值自动变成String类型 -->
<input type="number" v-model.number="age">
<h2>{{age}}---{{typeof(age)}}</h2>
3、、trim 作用：消除字符串连边的空格
<!-- 3、trim 修饰符 -->
<input type="text" v-model="trim">
<h2>{{trim}}</h2>
*******完整代码*****
<!DOCTYPE html>
<html lang="en"> <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>
<script src="./js/vue.js"></script>
</head>
<div id="app">
<!-- <input type="text" v-model="message"> -->
<input type="text" :value="message" @input="message=$event.target.value">
<h2>{{message}}</h2><br> <label for="man">
<input type="radio" id="man" value="男" v-model="sex">
</label>
<label for="Wman">
<input type="radio" id="Wman" value="女" v-model="sex">
</label>
<h2>你选择的性别是：{{sex}}</h2><br> <!-- checkbox 单选框 -->
<label for="agree">
<input type="checkbox" id="agree" v-model="ischange">同意协议
</label>
<h2>你选择的是:{{ischange}}</h2>
<button :disabled="!ischange">下一步</button><br><br><br> <!-- checkbox 多选框 -->
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<input type="checkbox" value="兵乓球" v-model="hobbies">兵乓球
<input type="checkbox" value="排球" v-model="hobbies">排球
<h2>你的爱好是：{{hobbies}}</h2><br><br><br> <!-- select 单选 -->
<select name="" id="" v-model="fruit">
<option value="西瓜">西瓜</option>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="草莓">草莓</option>
</select>
<h2>你选择的水果是：{{fruit}}</h2><br><br>
<!-- select 多选 -->
<select name="" id="" v-model="fruits" multiple>
<option value="西瓜">西瓜</option>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="草莓">草莓</option>
</select>
<h2>你选择的水果是:{{fruits}}</h2><br><br> <!-- 值绑定 -->
<label :for="item" v-for="item in fruitHobbies">
<input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
</label><br><br> <!-- v-model 修饰符 的使用 -->
<!-- 1、lazy修饰符 -->
<label for="active">
<input type="text" id="active" v-model.lazy="message">
</label>
<h2>{{message}}</h2><br> <!-- 2、number修饰符 -->
<!-- 当type的类型为number类型的时候，v-model绑定的值自动变成String类型 -->
<input type="number" v-model.number="age">
<h2>{{age}}---{{typeof(age)}}</h2><br> <!-- 3、trim 修饰符 -->
<input type="text" v-model="trim">
<h2>{{trim}}</h2>
</div> <body>
<script>
let vm = new Vue({
el: '#app',
data: () => ({
message: 'v-model实现原理',
sex: '男',
age:0,
ischange: true,
hobbies: [],
fruit: '香蕉',
fruits: [],
fruitHobbies: ['西瓜', '草莓', '香蕉', '苹果', '哈密瓜'],
trim:' 去除字符串两边的空格,控制台才能看出来 '
}),
methods: {}
})
</script>
</body> </html>
最新文章
- AEAI CRM_v1.5.2升级说明，开源客户关系管理系统
- jquery.smint.js 页面菜单浮动之谷歌浏览器异常
- javascript之简单的选择排序法
- C# IIS应用程序池辅助类 分类： C# Helper 2014-07-19 09:50 249人阅读 评论(0) 收藏
- sbrk与brk的使用小例子
- [MFC] MFC 用mciSendString加载WAV资源文件
- （续篇3）：飞测独家のJmeter秘籍，限量发放
- Traveling by Stagecoach 状态压缩裸题
- 通过expdp/impdp进行oracle数据库的备份恢复详细指导
- linux动态库加载RPATH, RUNPATH
- 14.3.5.3 How to Minimize and Handle Deadlocks 如何减少和处理死锁
- RAID基础知识总结
- Jumpserver之安装在CentOS主机步骤
- Django项目的创建的基本流程---基本配置
- Go signals 信号
- js object template
- git clone 后误删除了分离出来的文件怎么恢复？
- 框架源码系列五：学习源码的方法（学习源码的目的、 学习源码的方法、Eclipse里面查看源码的常用快捷键和方法）
- python之count()函数
- Fiddler 4 界面功能介绍