vue---v-model的详细解答
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>
vue---v-model的详细解答的更多相关文章
- Vue2全家桶之一：vue-cli（vue脚手架）超详细教程
本文转载于:https://www.jianshu.com/p/32beaca25c0d 都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到 ...
- vue-cli（vue脚手架）超详细教程
都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前用jq随便拿全局变量和修改dom的锤子不能用了,vu ...
- vue对比其他框架详细介绍
vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...
- office web apps安装部署,配置https,负载均衡（七）配置过程中遇到的问题详细解答
该篇文章,是这个系列文章的最后一篇文章,该篇文章将详细解答owa在安装过程中常见的问题. 如果您没有搭建好office web apps,您可以查看前面的一系列文章,查看具体步骤: office we ...
- CF468C Hack it! 超详细解答
CF468C Hack it! 超详细解答 构造+数学推导 原文极简体验 CF468C Hack it! 题目简化: 令\(f(x)\)表示\(x\)在十进制下各位数字之和 给定一整数\(a\)构造\ ...
- 适用于小白：VSCode搭建Vue项目，最详细的搭建步骤哦
在vscode上搭建一个vue项目---初学总结. 1.假设Vscode.nodejs等已经安装好了. 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目. 安装命令: npm ...
- A+B Problem 详细解答 (转载)
此为详细装13版 转载自:https://vijos.org/discuss/56ff2e7617f3ca063af6a0a3 全文如下,未作修改,仅供围观,不代表个人观点: 你们怎么都在做网络流,不 ...
- Vue filter介绍及详细使用
Vue filter介绍及其使用 VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果. Vue.js自带了一些默认过滤器例如: capitalize 首字母大写 uppe ...
- vue框架搭建的详细步骤之项目结构（二）
上一篇中简单的创建了一个脚手架,这篇简单的讲一下脚手架的项目结构: (1).build/ 此目录包含开发服务器和生产webpack构建的实际配置.通常,您不需要触摸这些文件,除非您要自定义We ...
- vue框架搭建的详细步骤（一）
在这里我们先快速的搭建一个vue的脚手架: (1).在安装vue的环境之前,安装NodeJS环境是必须的.可以使用node -v指令检查,需要保证安装了4.0版本以上的nodeJS环境. 没有安装的话 ...
随机推荐
- [20190910]关于降序索引问题5.txt
[20190910]关于降序索引问题5.txt --//测试了索引TERM使用0xfe表示,回想到以前遇到降序索引的特殊字符编码问题,现在可是忘得一干二净.--//现在想想当时自己怎么猜测出来的,^_ ...
- 海思屏幕HAL代码解析
显示屏幕(LCD)模块提供屏幕相关功能接口,调用者为上层应用模块(含 init.状态机.ui),上下文依赖关系,如图 3-7 所示. 系统框架为 linux+Huawei LiteOS 双系统架构,媒 ...
- nginx 安装 lua_nginx_module 模块（nginx——lua 学习笔记1）
插入两个网站: nginx + lua 的OpenResty 开发 跟我学OpenResty(Nginx+Lua)开发目录贴 两个都是 可以根据目录一步步学习的. 1. 版本下载 nginx版本为 n ...
- Linux 修改/etc/sudoers 可被任何修改，如何解决
今天不小心,修改了/etc/sudoers的权限 改成了 777的权限, 于是每次使用sudo都会弹出 sudo:sudo /etc/sudoers is world writable sudo:no ...
- Sqlserver 2014 下载
ed2k://|file|cn_sql_server_2014_enterprise_edition_x64_dvd_3932882.iso|2898847744|A33CE10CD989083D1A ...
- Pwn-level0
题目地址 https://dn.jarvisoj.com/challengefiles/level0.b9ded3801d6dd36a97468e128b81a65d 第一步先看文件的属性 64 ...
- 鲜贝7.3--mysql安装
1.安装包下载 首先是下载 mysql-installer-community-5.6.14.0.msi ,大家可以到 mysql 官方网去下载. win10的安全机制比较严格,安装前最好到<设 ...
- 求解LCA问题的几种方式
求解LCA问题的几种方式 这篇随笔讲解图论中LCA问题(最近公共祖先)的几种求解方式及实现方法.LCA问题属于高级图论,所以希望读者学习过初级图论,知道图的一些基本知识,并懂得深搜算法的实现方式.这样 ...
- appium--python启动appium服务
前戏 前面我们都是在cmd下通过输入appium加端口号来启动服务的,在我们做自动化的时候,我们当然不希望我们手动启动appium服务,而是希望通过脚本自动启动appium服务. 我们可以使用subp ...
- 剑指offer：按之字形打印二叉树（栈|双向队列+中序遍历）
1. 题目描述 /** 请实现一个函数按照之字形打印二叉树, 即第一行按照从左到右的顺序打印, 第二层按照从右至左的顺序打印, 第三行按照从左到右的顺序打印, 其他行以此类推. */ 2. 双向队列 ...