关于vue.js中表单控件绑定练习
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件绑定</title>
</head>
<body>
<!-- v-model在表单控件元素上实现数据的双向绑定 -->
<div id="app-1">
<input type="text" v-model="message" placeholder="请输入">
<p>{{message}}</p>
</div>
<!-- 单个勾选框 -->
<div id="app-2">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<!-- 多个勾选框绑定到同一数组 -->
<div id="app-3">
<input type="checkbox" id="checkboxjack" v-model="checkedNames" value="Jack">
<label for="checkboxjack">Jack</label>
<input type="checkbox" id="checkboxJohn" v-model="checkedNames" value="John">
<label for="checkboxJohn">John</label>
<input type="checkbox" id="checkboxMike" v-model="checkedNames" value="Mike">
<label for="checkboxMike">Mike</label>
<span>我是{{checkedNames}}</span>
</div>
<!-- 单选框 -->
<div id="app-4">
<input type="radio" id="man" value="man" v-model="sex">
<label for="man">man</label>
<input type="radio" id="woman" value="woman" v-model="sex">
<label for="woman">woman</label>
<span>选择的时是{{sex}}</span>
</div>
<!-- 单选列表 -->
<div id="app-5">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>我是{{selected}}</span>
</div>
<!-- 多选列表 绑定到数组-->
<div id="app-6">
<select v-model='selected' multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>我选择了{{selected}}</span>
</div>
<!-- 动态选项用v-for渲染 通过v-bind绑定value-->
<div id="app-7">
<select v-model='selected'>
<option v-for="item in items" v-bind:value="item.value">
{{item.text}}
</option>
</select>
<!-- v-model后的selected必须出现在data中 -->
<span>选择的是{{selected}}</span>
</div>
<!-- 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步： -->
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
<!-- 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值： -->
<input v-model.number="age" type="number">
<!-- 这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。.trim如果要自动过滤用户输入的首尾空格，可以添加.trim 修饰符到 v-model 上过滤输入： -->
<input v-model.trim="msg">
<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>
js:
var app1=new Vue({
el:'#app-1',
data:{
message:'开始'
}
});
var app2=new Vue({
el:'#app-2',
data:{
checked:false
}
});
var app3=new Vue({
el:'#app-3',
data:{
checkedNames:[]
}
});
var app4=new Vue({
el:'#app-4',
data:{
sex:''
}
});
var app5=new Vue({
el:'#app-5',
data:{
selected:''
}
});
var app6=new Vue({
el:'#app-6',
data:{
selected:[]
}
});
var app7=new Vue({
el:'#app-7',
data:{
selected: 'A',
items:[
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
});
关于vue.js中表单控件绑定练习的更多相关文章
- vue v-model 表单控件绑定
v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- 表单控件绑定v-model
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- vue2.0 之表单控件绑定
表单控件绑定v-model 1.文本 <template> <div> <input type="text" name="" v- ...
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- vue表单控件绑定（表单数据的自动收集）
v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...
- 037——VUE中表单控件处理之表单修饰符：lazy/number/trim
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 字符编码和python .encode().decode()方法
字符编码与encode.decode的问题: 用8个开关表示世界万物 ASCII : American Standard Code for Information Interchange,美国 ...
- LeetCode之Unique Binry Search Trees
4月份很快就过半了,最近都在看WPF,有点落伍了...本来想写一点读书笔记的,还没想好要怎么写.所以为了能够达到每月一篇博客的目标,今天先说一个LeetCode上的面试题:Unique Binary ...
- Emacs 相关资料翻译
Table of Contents 1. 37 Document Viewing 2. EmacsrelatedTranslation 2.1. Spacemacs 配置层(Configuration ...
- C语言的编译过程、安装gcc编译器以及设置环境变量
以我对C语言编译过程的了解,我用了一点时间画了一个图,提供给大家参考一下,希望有些能对您的问题提上帮助. 前几天刚初步学习了C语言的编译过程,感触挺深的.在C语言中头文件其实起了一个很大的作用. 1. ...
- Apache Flume 1.7.0 发布，日志服务器
Apache Flume 1.7.0 发布了,Flume 是一个分布式.可靠和高可用的服务,用于收集.聚合以及移动大量日志数据,使用一个简单灵活的架构,就流数据模型.这是一个可靠.容错的服务. 本次更 ...
- display:inline-block 和float:left 的区别
display:inline-block 和float:left 的区别 display是指显示状态,float是针对块级元素的浮动. 使用inline-block:控制元素的垂直对齐跟横向排列元 ...
- 《C++primer》v5 第5章 语句 读书笔记 习题答案
5.1 空语句只有一个";".如果什么也不想做可以使用空语句. 5.2 用花括号{}括起来的叫块,也叫复合语句.有多条语句作用在同一个作用域时,需要用花括号括起来. 5.3 降低了 ...
- js和jquery获取图片真实的宽度和高度
1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往 ...
- android 透明度
透明度百分比对应的十六进制: (说明:百分比计算出来会有小数,按照常规的四舍五入处理,详情请往下查看) 百分比:0% HEX: 00 百分比:1% HEX: 30 百分比:2% HEX: 50 百分比 ...
- HTML 样式属性
@charset "utf-8"; /* CSS Document */ <style> p{ /*背景与前景*/ background-color:#000;/*背景 ...