Vue 学习笔记之 —— 表单输入绑定
Vue 中文文档 https://cn.vuejs.org/
不多说，直接上干货。
v-model 指定，用来在input textarea 等表单元素上创建双向数据绑定，负责监听用户的输入事件，以及更新数据。
1. 文本绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="form1">
<input type="text" v-model="message">
<h3>{{message}}</h3>
</form>
<script src="../lib/vue.js"></script>
<script !src="">
var Vue = new Vue({
el: "#form1",
data: {
message: ""
}
})
</script>
</body>
</html>
input中更改文本，h3 里也会相应更改。
2.复选框：
<form action="" id="form1">
<label>
Jack:<input type="checkbox" value="Jack" v-model="checkedNames">
</label>
<label>
John:<input type="checkbox" value="John" v-model="checkedNames">
</label>
<label>
Mike:<input type="checkbox" value="Mike" v-model="checkedNames">
</label>
<br>
<span>{{checkedNames}}</span>
</form> <script src="../lib/vue.js"></script>
<script !src="">
var Vue = new Vue({
el: "#form1",
data: {
checkedNames: []
}
})
</script>
多个复选框，绑定到同一个数组，选中，则数组添加该项，反之，则数组删除该项。
3.单选框：
<form action="" id="form1">
<label for="">
boy: <input type="radio" v-model="sex" value="boy">
</label>
<label for="">
girl: <input type="radio" v-model="sex" value="girl">
</label>
<br>
<span>{{sex}}</span>
</form> <script src="../lib/vue.js"></script>
<script !src="">
var Vue = new Vue({
el: "#form1",
data: {
sex:""
}
})
</script>
用v-model来代替原本的name即可。
4.选择框：
<form action="" id="form1">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</form> <script src="../lib/vue.js"></script>
<script !src="">
var Vue = new Vue({
el: "#form1",
data: {
selected:""
}
})
</script>
当然，我们要给option，id值，而此时，我们给data中的selected赋值某一option项的id值，则默认选中此项
<form action="" id="form1">
<select v-model="selected">
<option disabled value="">请选择</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</form> <script src="../lib/vue.js"></script>
<script !src="">
var Vue = new Vue({
el: "#form1",
data: {
selected: "B"
}
})
</script>
使用v-for 动态渲染：
<form action="" id="form1">
<select v-model="selected">
<option v-for="option in options" :value="option.value">
{{option.text}}
</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</form>
<script src="../lib/vue.js"></script>
<script !src=""> var Vue = new Vue({
el: "#form1",
data: {
selected:"C",
options: [
{
text: "One", value: "A",
}, {
text: "Two", value: "B",
}, {
text: "Three", value: "C",
}]
}
})
</script>
三种修饰符：
.lazy：在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
.number：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
.trim：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
Vue 学习笔记之 —— 表单输入绑定的更多相关文章
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
- Vue.js学习笔记--3.表单输入绑定
整理自官网教程 -- https://cn.vuejs.org/ 利用v-model可以实现表单元素的value与后台数据的双向绑定,具体用法如下: <!--文本--> <input ...
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- VUE：事件处理和表单输入绑定
事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- Vue（10）表单输入绑定v-model
v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 绑定的属性和事件 v-model在内部为不同的输入元 ...
- Vue学习笔记之表单绑定输入
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
- vue - 计算属性、表单输入绑定
计算属性 computed:{} <!DOCTYPE html> <html> <head> <title></title> </he ...
- No.4一步步学习vuejs之表单输入绑定
基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以 ...
- Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom
这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...
随机推荐
- 发送验证码倒计时60s
var wait=60; function time(o) { if (wait == 0) { o.removeClass("gray"); o.text("发送验证码 ...
- JavaScript实现10大算法可视化
参考博客: https://www.cnblogs.com/Unknw/p/6346681.html#4195503 十大经典算法 一张图概括: 名词解释: n:数据规模 k:“桶”的个数 In-pl ...
- shell getopts命令
由于shell命令行的灵活性,自己编写代码判断时,复杂度会比较高.使用内部命令 getopts 可以很方便地处理命令行参数.一般格式为: getopts optstring name [args] ...
- mysql 日期和时间戳互换
1.日期转时间戳 UNIX_TIMESTAMP('2019-06-25 12:30:00') 2.时间戳转日期 FROM_UNIXTIME(1545711900,'%Y-%m-%d') 3. DAT ...
- ssh文件 ip锁定
vi ~/.ssh/config Host web*hostname 115.29.242.1**user lian Host **hostname 192.168.1.**user dface
- hbase GC优化
编辑配置文件 编辑 hbase-env.sh export HBASE_OPTS="$HBASE_OPTS -XX:+UseCompressedOops -XX:+UseParNewGC ...
- idea 右键没有class文件的问题，，
修改文件夹的 属性 蓝色即为java代码,,绿色为test,,等等
- idea激活教程，最新！！！
1.下载破解补丁(关键). 破解补丁:JetbrainsIdesCrack-4.2-release.jar百度云地址:https://pan.baidu.com/s/18ovphd7sm7oYXQb4 ...
- list集合获取相同以及不同的对象
List<StyleMenuModule> list1 = new ArrayList<>(); StyleMenuModule s1 = new StyleMenuModul ...
- Rikka with Competition
Rikka with Competition 给出一个大小为n的集合\(\{a_i\}\),每次从集合中随机挑出一对数\(a_i,a_j\),如果\(|a_i-a_j|>K\),那么从集合中删掉 ...