本篇主要说明表单控件的数据绑定,这次没有新的知识点

文本框

1、普通文本框

<div id="app-1">
<p><input v-model="textBox" placeholder="输入内容...">输入的内容:{{ textBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
textBox: ''
}
})
</script>

2、数字文本框

<div id="app-1">
<p><input v-model.number="numberTextBox" type="number" placeholder="输入内容..."> 输入的内容:{{ numberTextBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
numberTextBox: ''
}
})
</script>

.number参数会强制把返回值转成Number类型,因为就算是type="number",返回的也是字符串型

3、多行输入框

<div id="app-1">
<p><textarea v-model="multiTextBox" placeholder="输入内容..."></textarea></p>
<p>输入的内容:</p>
<p style="white-space:pre">{{ multiTextBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
multiTextBox: ''
}
})
</script>

style="white-space:pre"表示空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签

复选框

1、单个复选框

<div id="app-1">
<input type="checkbox" id="checkbox" v-model="singleCheckBox">
<label for="checkbox">{{ singleCheckBox }}</label>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
singleCheckBox: false
}
})
</script>
</body>

2、定义属性单个复选框

<div id="app-1">
<input type="checkbox" id="checkbox" v-model="customSingleCheckBox" v-bind:true-value="customTrue" v-bind:false-value="customFalse">
<label for="checkbox">{{ customSingleCheckBox }}</label>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
customTrue: '真',
customFalse: '假',
customSingleCheckBox: '假'
}
})
</script>

v-bind:true-value设置为真时的属性,v-bind:false-value设置为假时的属性

3、多个复选框

<div id="app-1">
<input type="checkbox" id="tansea" value="TanSea" v-model="multiCheckBox">
<label for="tansea">TanSea</label>
<input type="checkbox" id="google" value="Google" v-model="multiCheckBox">
<label for="google">Google</label>
<input type="checkbox" id="baidu" value="Baidu" v-model="multiCheckBox">
<label for="baidu">Baidu</label>
<p>选择的项:{{ multiCheckBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
multiCheckBox: []
}
})
</script>

单选框

<div id="app-1">
<input type="radio" id="male" value="男" v-model="radioBox">
<label for="male">男</label>
<input type="radio" id="female" value="女" v-model="radioBox">
<label for="female">女</label>
<p>选择的项:{{ radioBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
radioBox: ''
}
})
</script>

下拉框

1、普通下拉框

<div id="app-1">
<select v-model="comboBox">
<option disabled value="">请选择一项</option>
<option>男</option>
<option>女</option>
</select>
<p>选择的项:{{ comboBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
comboBox: ''
}
})
</script>

2、动态绑定下拉框

<div id="app-1">
<select v-model="dynamicComboBox">
<option v-for="optionItem in optionItems" v-bind:value="optionItem.value">
{{ optionItem.text }}
</option>
</select>
<p>选择的项:{{ dynamicComboBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
dynamicComboBox: '',
optionItems: [
{ value: 'TanSea', text: '双子宫殿' },
{ value: 'Google', text: '谷歌搜索' },
{ value: 'Baidu', text: '百度搜索' }
]
}
})
</script>

3、多选列表

<div id="app-1">
<p><select v-model="multiComboBox" multiple>
<option>双子宫殿</option>
<option>谷歌搜索</option>
<option>百度搜索</option>
</select></p>
<p>选择的项:{{ multiComboBox }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
multiComboBox: []
}
})
</script>

Vue.js学习笔记 第七篇 表单控件绑定的更多相关文章

  1. Vue.js 学习笔记 第6章 表单与v-model

    本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业 ...

  2. Vue.js-----轻量高效的MVVM框架(七、表单控件绑定)

    话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  4. .NET MVC 学习笔记(七)— 控制input控件

    .NET MVC 学习笔记(七)— 控制input控件 画面中有时候需要输入数字,这时就需要控制input的输入.以下为保留两位有效数字. /* * 初始化数字输入 */ function initD ...

  5. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  6. 表单控件绑定v-model

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  7. vue2.0 之表单控件绑定

    表单控件绑定v-model 1.文本 <template> <div> <input type="text" name="" v- ...

  8. Vue.js学习 Item9 – 表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...

  9. vue表单控件绑定(表单数据的自动收集)

    v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...

随机推荐

  1. python 自动化之路 day 18 前端内容回顾、补充/Django安装、创建

    前端回顾: 整体: - HTML - CSS - JavaScript - 基本数据类型 - for,while.. - DOM - obj = document.getElementById('.. ...

  2. SEO前端需要注意的地方

    1 合理的title ,description ,keyswords 搜索引擎对这三项的权重逐渐减小,title 强调重点即可,重要的关键字不要超过两次,而且要靠前. 2 不同的tilte要有所不同, ...

  3. 微信 oauth4

    4.最后 4. 使用access_token获取用户信息 请求方法: https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN& ...

  4. cocos2dx - 部署到android真机上错误整理

    利用Cgywin编译工具来将cocos2dx 在Android运行所需要的C++文件编译 1. ./build_native.sh(最后一把执行出错) please define NDK_ROOT i ...

  5. SQL.Cookbook 读书笔记4 插入更新和删除

    第四章 插入更新和删除 4.1 插入数据 ,'PROGRA','NEW YOURK'); 4.2 从一个表向另一个表中复制 insert into dept_east(deptno,dname,loc ...

  6. IOS7 UI Transition Guide 状态栏 statusbar

    本文转载至 http://blog.csdn.net/linzhiji/article/details/12233387 Redesign Your App for iOS 7 之 页面布局 iOS7 ...

  7. lua(仿单继承)

    --lua仿单继承 Account = { balance = } function Account:new(o) o = o or {} setmetatable(o, self)--Account ...

  8. 【BZOJ1731】[Usaco2005 dec]Layout 排队布局 差分约束

    [BZOJ1731][Usaco2005 dec]Layout 排队布局 Description Like everyone else, cows like to stand close to the ...

  9. cocos2d-x设计模式发掘之三:管理者模式

      作者 firedragonpzy    地址:http://www.firedragonpzy.com.cn/index.php/archives/2103 想必读者一看这个题目又要纳闷了,神马又 ...

  10. 浅析TCP/IP

    TCP/IP概述 TCP/IP起源于1969年美国国防部(DOD:The United States Department Of Defense)高级研究项目管理局(APRA:AdvancedRese ...