前端框架之Vue(8)-表单输入绑定
基础用法
你可以用 v-model 指令在表单 <input> 、 <textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
- 注意:
- v-model 会忽略所有表单元素的 value 、 checked 、 selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
- 对于需要使用输入法 (如中文、日文、韩文等) 的语言,你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用 input 事件。
文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
- 注意:
- 在文本区域插值 ( <textarea></textarea> ) 并不会生效,应用 v-model 来代替。
复选框
单个复选框,绑定到布尔值:
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多个复选框,绑定到同一个数组:
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
单选按钮
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
选择框
单选时:
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '...',
data: {
selected: ''
}
})
多选时 (绑定到一个数组):
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#example-6',
data: {
selected: []
}
})
用 v-for 渲染的动态选项:
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
值绑定
对于单选按钮,复选框及选择框的选项,v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值):
<!-- 当选中时,`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle"> <!-- 当选中第一个选项时,`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串。
复选框
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'
单选按钮
<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时
vm.pick === vm.a
选择框的选项
<select v-model="selected">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123
修饰符
.lazy
在默认情况下, v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:
<input v-model.number="age" type="number">
这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。
.trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:
<input v-model.trim="msg">
补充
图片轮播
- 要求:
- 实现图片轮播效果。
- 鼠标悬浮时图片停止轮播、移开时继续轮播。
- 通过上一张、下一张按钮可控制图片翻页。
- 通过选中图片序号可控制图片翻页。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>test</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
ul li {
list-style: none;
float: left;
margin-right: 10px;
margin-top: 10px;
line-height: 30px;
width: 20px;
background-color: black;
color: white;
text-align: center; } .changeColor{
background-color: green;
}
</style>
</head> <body>
<div id='app'>
<img :src='currentSrc' @mouseover='stop' @mouseout='start' width="600" height="350" alt="">
<hr>
<button @click="preSrc()">上一张</button>
<button @click="nextSrc()">下一张</button>
<hr>
<ul>
<li :class='{changeColor:srcIndex==index}' @click='selectCurrect(index)' v-for="item,index in imgSrcArr">
{{ index+1 }}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
created() {
this.srcIndex++;
this.start();
},
methods: {
//下一张
nextSrc() {
this.stop();
if (this.srcIndex == this.imgSrcArr.length - 1)
this.srcIndex = -1;
this.srcIndex++;
this.start();
},
//上一张
preSrc() {
this.stop();
if (this.srcIndex == 0)
this.srcIndex = this.imgSrcArr.length;
this.srcIndex--;
this.start();
},
//切换到指定Index图
selectCurrect(index) {
this.stop();
this.srcIndex = index;
this.start();
},
//停止轮播
stop() {
clearInterval(this.timer);
},
//开始轮播
start(){
this.timer = setInterval(this.nextSrc, 1000);
}
},
computed:{
//当前显示图片的src
currentSrc(){
return this.imgSrcArr[this.srcIndex];
}
},
data: {
//当前图片src的Index
srcIndex: -1,
//图片src数组
imgSrcArr: [
'img/1.jpg',
'img/2.jpeg',
'img/3.png',
'img/4.jpg'
],
//轮播定时器
timer: null,
}
});
</script>
</body> </html>
v-model的实现原理
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id='app'>
<input type="text" :value='msg' @input='changeMsg'>
{{Msg}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
computed: {
Msg: {
get() {
return this.msg;
},
set(newValue) {
this.msg = newValue;
}
}
},
methods: {
changeMsg(e) {
console.log(e); //InputEvent {isTrusted: true, data: "a", isComposing: false, inputType: "insertText", dataTransfer: null, …}
console.log();
this.Msg = e.target.value;
}
}
});
</script>
</body> </html>
前端框架之Vue(8)-表单输入绑定的更多相关文章
- vue 之 表单输入绑定
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
- 一起学Vue之表单输入绑定
在Vue进行前端开发中,表单的输入是基础且常见的功能,本文以一个简单的小例子,简述v-model数据绑定的用法,仅供学习分享使用,如有不足,还请指正. 基础用法 你可以用 v-model 指令在表单 ...
- vue基础——表单输入绑定
一.基础用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件类型自动选择正确的方法来更新元素. 尽管有些神 ...
- vue基础---表单输入绑定
[一]基础用法 用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方 ...
- vue的表单输入绑定
1.单行绑定 <p>{{logintype}}</p> <input type="text" v-model="logintype" ...
- vue之表单输入绑定
- 前端MVC Vue2学习总结(五)——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
- Vue表单输入绑定(文本框和复选框)
文本框 <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
随机推荐
- Navicat -- Oracle -- 错误锦集
ORA:connection to server failed,probable Oracle Net admin error 解决的方案是: oci.dll的版本不对 从 http://www.o ...
- fs项目---->cron框架的学习(一)
Cron是一种允许您按计划执行某些内容的工具.这通常使用cron语法来完成.我们允许您在计划作业触发时执行函数.我们还允许您使用子进程执行javascript进程外部的作业.此外,这个库超出了基本的c ...
- css3整理--transition
transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...
- Unity3D Shader 模型流光效果
Shader "Custom/FlowColor" { Properties { _MainTex ("Base (RGB)", 2D) = "whi ...
- iOS - 身份证判断正则加算法
身份证常识 我国的身份证号分为15位和18位两种.身份证是国民的身份编号,编号是有一定规律的. 居民身份证号码,根据[中华人民共和国国家标准 GB -]中有关公民身份号码的规定,公民身份号码是特征组合 ...
- 文本分类学习 (八)SVM 入门之线性分类器
SVM 和线性分类器是分不开的.因为SVM的核心:高维空间中,在线性可分(如果线性不可分那么就使用核函数转换为更高维从而变的线性可分)的数据集中寻找一个最优的超平面将数据集分隔开来. 所以要理解SVM ...
- 洛谷P1434 滑雪【记忆化搜索】
题目:https://www.luogu.org/problemnew/show/P1434 题意: 给一个矩阵,矩阵中的数字代表海拔高度. 现在要找一条最长路径,使得路径上的海拔是递减的. 思路: ...
- Kindle2018 一周使用报告
使用2018年年末刚刚发布的KPW有一周时间了,可以借这个机会来对这部设备做一个使用报告了. 那咱们就参考如下描述吧: 1.轻薄便携:6英寸的屏幕,11.6厘米*16.7厘米的机身尺寸,加上仅有8.2 ...
- Steeltoe之Service Discovery篇
在前文一窥Spring Cloud Eureka中,已经构建了基于Eureka的服务端与客户端,可用于实现服务注册与发现功能.而借助Steeltoe的类库,可以在.NET生态系统中使用Spring C ...
- 腾讯云短信服务使用记录与.NET Core C#代码分享
1.即使是相同的短信签名与短信正文模板,也需要针对“国内文本短信”与“海外文本短信”分别申请.开始不知道,以为只要申请一次,给国外手机发短信时给api传对应的国家码就行,后来才发现需要分别申请. 2. ...