Vue.js -表单控件绑定 原
基础用法 你可以用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素,但v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子,v-model 会忽略所有表单元素的value 、checked、selected特性的初始值。因为它会选择Vue实例数据来作为具体的值。你应该通过JavaScript在组件的data选项中声明初始值 文本
<body class="">
<div id="example-1">
<input type="text" v-model="message" placeholder="edit me">
<p>{{message}}</p>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data:{
message:""
}
})
</script>
</body>
多行文本
<body class="">
<div id="example-1">
<span>multiline message is:</span>
<p style="white-space:pre-line">{{message}}</p>
<textarea v-model="message" cols="30" rows="10" placeholder="add multiple lines"></textarea>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data:{
message:""
}
})
</script>
</body>
//pre-line 合并空白符序列,但是保留换行符,意思是单词之间如果有多个空格,合并成一个空格,按回车键换行
在文本区域插值(<textarea></textarea>)并不生效,应用v-model来代替 ,即<textarea></textarea>不能使用{{message}这种形式
复选框 单个复选框,逻辑值
<body class="">
<div id="example-1">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data:{
checked:true
}
})
</script>
</body>
多个复选框,绑定到同一个数组,并把选中的按列表显示出来例子
<body class="">
<div id="example-1">
<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
<label for="jack">jack</label>
<input type="checkbox" id="join" value="join" v-model="checkedNames">
<label for="join">join</label>
<input type="checkbox" id="lily" value="lily" v-model="checkedNames">
<label for="lily">lily</label>
<ul>
<li v-for="item in checkedNames">{{item}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
checkedNames: []
}
})
</script>
</body>
单选按钮
<body class="">
<div id="example-1">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<div>{{picked}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
picked: "One"
}
})
</script>
</body>
//选中时显示的是value的值,通过v-model 指向同一个picked,就表明这几个单选框是一组
选中列表 单选列表
<body class="">
<div id="example-1">
<select v-model="selected">
<option value="" disabled>请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div>选择了:{{ selected }}</div>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
selected: ""
}
})
//在下拉列表中,请选择的value属性设置为空,否则option初始化显示为空,其余的option的value属性不设置,也不能设置为空,因为显示的内容优先显示value的值而不是option的内容
</script>
</body>
如果v-model表达初始的值不匹配任何选项(为空),select元素会以“未选中”的状态渲染,像以上提供的disabled选项是建议的做法
动态选项,用v-for渲染
<body class="">
<div id="example-1">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
</select>
<div>选择了:{{ selected }}</div>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
selected: "A",
options: [
{ text: "one", value: "A" },
{ text: "two", value: "B" },
{ text: "three", value: "C" },
]
}
})
</script>
</body>
对于单选按钮,勾选框及选择列表选项,v-model绑定的value通常是静态字符串(对于复选框是逻辑值) <!-- 当选中时,`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false,单个的复选框toggle只能是true或者false,多个的话可以绑定到一个数组并分别设置value --> <input type="checkbox" v-model="toggle">
<!-- 当选中时,`selected` 为字符串 "abc" 如果option没有value属性 则`selected` 为字符串 "ABC"--> <select v-model="selected"> <option value="abc">ABC</option> </select>
但是有时我们想绑定value到Vue实例的一个动态属性上,这时可以用v-bind实现,并且这个属性的值可以不是字符串,而是表达式,
复选框 当选中复选框时显示的是"your selected"
<body class="">
<div id="example-1">
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
<div>{{toggle}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
toggle:"",
a: "your selected",
b: "not select"
}
})
</script>
</body>
单选按钮
<body class="">
<div id="example-1">
<input type="radio" v-model="pick" v-bind:value="a" >
<input type="radio" v-model="pick" v-bind:value="b" >
<div>{{pick}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
pick:"",
a: "your selected a",
b: "your selected b",
}
})
</script>
</body>
选择列表设置
<body class="">
<div id="example-1">
<select v-model="selected">
<option v-bind:value="{number:1234}">123</option>
</select>
<div>{{selected.number}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
selected: "",
}
})
</script>
</body>
修饰符 .lazy
默认情况下,v-model 在input事件中同步输入框的数据,但你可以添加一个修饰符lazy,从而转变为在change事件中同步,当输入完,点击其它地方
<body class="">
<div id="example-1">
<input v-model.lazy="msg">
<div>{{msg}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
msg: "",
}
})
</script>
</body>
.number 如果想自动将用户输入值转为Number类型(如果原值的转换结果为NaN则返回原值),可以添加一个修饰符number给v-model来处理输入值 <input v-model.number="age" type="number">
.trim 如果要自动过滤用户输入的首尾空格,可以添加trim修饰符到v-model上过滤输入 <input v-model.trim="msg">
(adsbygoogle = window.adsbygoogle || []).push({});
- Java中使用线程时,请不要忘记Spring TaskExecutor组件
- 常见.NET功能代码汇总
- 如何通过追踪代码自动发现网站之间的“关联”
- 教你如何和使用这款强大的渗透平台-Xerosploit
- No.014 Longest Common Prefix
- Java实现解析IP地址的方法,给出一串数字,生成正确的IP地址
- 图解“管道过滤器模式”应用实例:SOD框架的命令执行管道
- No.013 Roman to Integer
- OData – the best way to REST–实例讲解ASP.NET WebAPI OData (V4) Service & Client
- Java实现的手工做乘法方法,给出二个字符串数字,返回相乘结果
- No.012 Integer to Roman
- 黑帽SEO剖析之手法篇
- IOS学习1——IOS应用程序的生命周期及基本架构
- 浅议“全局变量”、“多线程”和“编译器陷阱”
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一文搞懂Flink rocksdb中的数据恢复
- Linux expect用法介绍
- GitHub通过access token来clone代码
- 在.NET Core中使用MongoDB明细教程(1):驱动基础及文档插入
- 探索闭包
- openresty实现接口签名安全认证
- JavaScript空值合并运算符
- ROS1&2极简版安装配置案例(Noetic&Foxy@Ubuntu20.04)
- Java调用微信扫一扫
- 响应式布局新方案:融合响应式设计,开源 React 组件
- C++核心准则E.26:如果无法抛出异常,尽快进行失败处理
- 学习|C#的EventHandler的委托使用
- 性能分析(5)- 软中断导致 CPU 使用率过高的案例
- C++核心准则E.27:如果无法抛出异常,系统化运用错误处理代码
- C++核心准则E.28:避免基于全局状态的错误处理(例如errno)