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 ...
随机推荐
- Sublime text 3 3103 注册码(2016.2.9更新)
Sublime text 3 (Build 3103) license key,these all tested available on 2016/02/10 .Feel free to enjoy ...
- javascript拷贝创建对象
/*拷贝创建对象*/ function hightExtend() { var key = 0, i = 0, len = arguments.length; target = null; if ...
- bat 笔记
cmd删除非空文件夹 rd+空格+/s/q+空格+d:\filedir for语句的基本用法 在批处理文件中: FOR %%variable IN (command1) DO command2 [co ...
- 05、python的基础-->字典的增、删、改、查
1.字典的增 dict = {'age':19,'name':'老王','hobby':'girl'} dict['sex'] = 'boy' #没有键值对,直接添加 dict[' #有键值对,覆盖值 ...
- C語言中資料結構(struct)的大小
通常在PC上寫程式時,很少會去管struct會佔掉多少記憶體.當要使用到時,也不會想去用手算到底佔掉多少,大多是直接使用sizeof來做計算.然而sizeof計算出來的值往往不會如我們想的一樣.因為c ...
- 在同一个项目中灵活运用application/json 和application/x-www-form-urlencoded 两种传输格式（配合axios,同时配置loading）
'use strict' import axios from 'axios' // import qs from 'qs' import { Notification} from 'element-u ...
- 一、hibernate环境搭建
hibernate环境搭建 下载hibernate hibernate的jar 连接数据库的jar 解压hibernate,解压后目录结构 documentation :对应hibernate开发文档 ...
- Vue开发环境安装并集成element-ui示例
此文为转载,原文链接:https://blog.csdn.net/weixin_44670973/article/details/88871106 在此对原文中部分内容进行补充. 补充:element ...
- ionic node-sass安装或编译失败：MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”
错误原因:缺少windows构建插件 解决方法:npm install --global --production windows-build-tools (如果目录在C盘下,需要管理员权限运行,全 ...
- linux下nano命令大全
nano是一个字符终端的文本编辑器,有点像DOS下的editor程序.它比vi/vim要简单得多,比较适合Linux初学者使用.某些Linux发行版的默认编辑器就是nano. nano命令可以打开指定 ...