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

文本框

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. weixin oauth 授权

    1. 先了解下请求授权页面的构造方式:   https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_u ...

  2. python3----ljust rjust center

    Python中打印字符串时可以调用ljust(左对齐),rjust(右对齐),center(中间对齐)来输出整齐美观的字符串,使用起来非常简单,包括使用第二个参数填充(默认为空格).看下面的例子就会明 ...

  3. js判断选择的时间是否大于今天

    获取的时间格式为  2012-5-28var thetime = document.getElementById("clearDate").value;var   d=new   ...

  4. java 序列化的作用

    public class Test { public static String requestUrl = "http://localhost/SpringMvc/test.do" ...

  5. 九度OJ 1359:大魏树遍历 (树)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:299 解决:29 题目描述: 大魏是JOBDU技术组里最喜欢折腾的一个了,单反.骑车.改九度页面,当然还有YY prado.我们姑且先把这些 ...

  6. Oracle 11g Enhancements in AWR Baselines

    Enhancements in AWR Baselines A baseline is any set of snapshots taken over a period of time. The sn ...

  7. Java基础—类和对象

    基本概念 对象:对象是类的一个实例,有状态和行为.例如,一条狗是一个对象,它的状态有:颜色.名字.品种:行为有:摇尾巴.叫.吃等. 类:类是具有相同属性和方法的一组对象的集合,它为属于该类的所有对象提 ...

  8. 判断IP地址是否合法

    /* return 1 if string contain only digits, else return 0 */ int valid_digit(char *ip_str) { while (* ...

  9. Eclipse 变量高亮显示设置

    A:Window-> preferences->java->Editor->Mark Occurences Local variables就是变量的高亮显示

  10. SDWebImage浅析

    第一部分 SDWebImage库的作用: 通过对UIImageView的类别扩展来实现异步加载替换图片的工作. 主要用到的对象: 1)UIImageView(WebCache)类别,入口封装,实现读取 ...