vue指令：v-model绑定表单控件；v-model与v-bind结合使用
一、v-model绑定表单控件
v-model 双向数据绑定；一般用于表单元素，会忽略表单元素的value、checked、selected的初始值，且将Vue实例的数据作为数据来源。
1. 单行文本框 input[type="text"] 、多行文本框 textarea
v-model值绑定到value属性；
<body>
<div id="app">
<input type="text" v-model="username" value="我是初始值，但是我被忽略了"><br/>
<textarea v-model="schoolname" value="我是初始学校：北大青鸟"></textarea><br/>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
username:'小鸣',
schoolname:'XX科技大学'
}
})
</script>
</body>
运行图：
2. 单选框 input[type="radio"]
v-model 值绑定到 value属性；
<body>
<div id="app" style="padding-left:10px;">
<input type="radio" name="fruit" value="apple" v-model="radioValue">apple
<input type="radio" name="fruit" value="pear" v-model="radioValue">pear
<input type="radio" name="fruit" value="banana" v-model="radioValue">banana
<p>radioValue: {{radioValue}}</p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
radioValue:'pear',
}
})
</script>
</body>
运行图： 
3. 多选框 input[type="checkbox"]
- 单个复选框：
v-model 值为布尔值（true、false），绑定到 checked属性；
<body>
<div id="app" style="padding-left:10px;">
<input type="checkbox" v-model="checkValue"><br/>
<p>checkValue: {{checkValue}}</p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
checkValue:true
}
})
</script>
</body>
运行图： 
- 多个复选框
v-model 值为数组，绑定到 value属性（checkbox的vulue属性值必须要有）；
<body>
<div id="app" style="padding-left:10px;">
<input type="checkbox" v-model="moreCheck" value="box1">box1
<input type="checkbox" v-model="moreCheck" value="box2">box2
<input type="checkbox" v-model="moreCheck" value="box3">box3
<p>moreCheck: {{moreCheck}}</p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
moreCheck:['box2','box3']
}
})
</script>
</body>
运行图： 
二、v-model与v-bind结合使用
v-bind绑定属性，例如 v-bind:class="className"，缩写为 :class="className"；
//结合v-bind和v-model，实现效果：修改select选中值，从而给div绑定不同的类名，进而改变div的字体颜色；
<style>
.blue{color:blue;}
.red{color:red;}
.green{color:green;}
</style>
<body>
<div id="app">
<div :class="selectValue">这是一行会变色的字</div>
<select v-model="selectValue">
<option value="blue">blue</option>
<option value="red">red</option>
<option value="green">green</option>
</select>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
selectValue:'red'
}
})
</script>
</body>
运行图： 
vue指令：v-model绑定表单控件；v-model与v-bind结合使用的更多相关文章
- 关于vue.js中v-model与表单控件的双向绑定。
单选框:<input type="checkbox" id="checkbox" v-model="checked"><l ...
- Vue3组件（九）Vue + element-Plus + json = 动态渲染的表单控件
一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- vue表单控件绑定（表单数据的自动收集）
v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...
- vue v-model 表单控件绑定
v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head ...
- Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）
话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- Vue#表单控件绑定
使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...
随机推荐
- 基于goahead 的固件程序分析
# 前言 本文由 本人 首发于 先知安全技术社区: https://xz.aliyun.com/u/5274 最近在分析 dlink 的一个固件时遇到了用 goahead 开发的 web 服务.本文以 ...
- 使用office打印到文件功能进行打印测试
大家在日常的支持工作中常会遇到各种打印问题,所以进行一些打印测试也在所难免.但是每次跑来跑去浪费了宝贵的时间,打印又浪费了纸张资源.我们也会想到安装虚拟打印机,但因为没有合适的软件,结果是我们只 ...
- 3.HTML颜色
一,HTML 颜色采用的是 RGB 颜色,是通过对红(R).绿(G).蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红.绿.蓝三个通道的颜色. <p st ...
- ssm单项目整合
目录 前言 创建maven项目 添加依赖 配置文件 总览 jdbc配置 mybatis配置 dao层配置 service层配置 事务配置 controller配置 web.xml 使用 前言 spri ...
- 304 Not Modified 简述
在客户端向服务端发送http请求时,若返回状态码为304 Not Modified 则表明此次请求为条件请求.在请求头中有两个请求参数:If-Modified-Since 和 If-None-Matc ...
- 第八章 SQL高级处理 8-1 窗口函数
一.什么是窗口函数 窗口函数也称为LOAP函数.OnLine Analytical Processing的简称.意思是对数据库数据进行实时分析处理. 窗口函数就是为实现OLAP而添加的标准SQL功能. ...
- consul日常操作命令
#开发模式运行agent consul agent -dev #查看consul 集群成员 consul members [-detailed] members命令的输出基于gossip协议,并最终一 ...
- 17级-车辆工程-周金霖 计算机作业 MP4音乐网站
- 12-5 张雨RTCM3数据解码解不出的原因
数据大小:75kB 时间12-4 原因:二进制数据乱码,未通过电文头检验 2018-12-10 08:44:05 张雨RTCM32-MSM4无法固定,连差分都没有
- 项目--解决MySQL数据库插入中文乱码
转载自:http://blog.csdn.net/zzh920625/article/details/51226312 情景再现] 如图,在项目中使用MySQL数据库,在做插入操作时,写入英文字符没有 ...