Vue进阶之表单控件绑定
1.单行input
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test-vuejs</title>
</head>
<body>
<div id="example">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
<script src="./js/vue/vue.js"></script>
<script>
var example = new Vue({
el: '#example',
data:{
message: ''
}
})
</script>
</body>
</html>
2.多行
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test-vuejs</title>
</head>
<body>
<div id="example">
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<script src="./js/vue/vue.js"></script>
<script>
var example = new Vue({
el: '#example',
data:{
message: ''
}
})
</script>
</body>
</html>
3.单选框
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test-vuejs</title>
</head>
<body>
<div id="example">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<script src="./js/vue/vue.js"></script>
<script>
var example = new Vue({
el: '#example',
data:{
checked: ''
}
})
</script>
</body>
</html>
4.复选框
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test-vuejs</title>
</head>
<body>
<div id="example">
<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>
<script src="./js/vue/vue.js"></script>
<script>
var example = new Vue({
el: '#example',
data:{
checkedNames: []
}
})
</script>
</body>
</html>
5.单选按钮
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test-vuejs</title>
</head>
<body>
<div id="example">
<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>
<script src="./js/vue/vue.js"></script>
<script>
var example = new Vue({
el: '#example',
data:{
picked: ''
}
})
</script>
</body>
</html>
6.选择列表
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test-vuejs</title>
</head>
<body>
<div id="example">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script src="./js/vue/vue.js"></script>
<script>
var example = new Vue({
el: '#example',
data:{
selected: ''
}
})
</script>
</body>
</html>
7.多选
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test-vuejs</title>
</head>
<body>
<div id="example">
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
<script src="./js/vue/vue.js"></script>
<script>
var example = new Vue({
el: '#example',
data:{
selected: []
}
})
</script>
</body>
</html>
8.动态选项
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test-vuejs</title>
</head>
<body>
<div id="example">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script src="./js/vue/vue.js"></script>
<script>
var example = new Vue({
el: '#example',
data:{
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
</script>
</body>
</html>
方法论：gif截图很有意思 GifCam
Vue进阶之表单控件绑定的更多相关文章
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- 表单控件绑定v-model
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- vue2.0 之表单控件绑定
表单控件绑定v-model 1.文本 <template> <div> <input type="text" name="" v- ...
- Vue#表单控件绑定
使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
- vue表单控件绑定（表单数据的自动收集）
v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...
- vue v-model 表单控件绑定
v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head ...
- Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）
话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- C语言传参的类型匹配
有一个这样的问题: 形参const char *p和实参char *c可以匹配 形参const char**p和实参char**c不可以匹配 注:argument和parameter:严格而言,par ...
- centos7 jumpserver 部署和使用手册（一）
测试推荐环境 CPU: 64位双核处理器 内存: 4G DDR3 数据库:mysql 版本大于等于 5.6 mariadb 版本大于等于 5.5.6 环境 系统: CentOS 7.2 IP: 192 ...
- redhat7.5 升级OpenSSH_7.8p1
1:拷贝编译好rpm安装包 [root@liwm ~]# scp -r root@192.168.31.130:/home/openssh7.8 /home/ root@192.168.31.130' ...
- qume-kvm 命令管理
sudo /etc/init.d/acpid start 安装管理包工具 sudo apt install libguestfs-tools [ qemu-kvm qemu-kvm-tools vir ...
- 紫书 习题8-12 UVa 1153（贪心）
本来以为这道题是考不相交区间, 结果还专门复习了一遍前面写的, 然后发现这道题的区间是不是 固定的, 是在一个范围内"滑动的", 只要右端点不超过截止时间就ok. 然后我就先考虑有 ...
- Python学习简单练习-99乘法表
__author__ = 'ZFH'#-*- coding:utf-8 -*-for i in range(10): #外层循环,range(10),1-9 for j in range(1,i+1) ...
- OpenCASCADE点向平面投影
OpenCASCADE点向平面投影 OpenCASCADE的ProjLib类提供了解析曲线(直线.圆.椭圆.抛物线.双曲线)向解析曲面(平面.圆柱面.圆锥面.球面.圆环面)投影的功能,主要用来计算三维 ...
- BZOJ 1588 平衡树 模板题
Treap: //By SiriusRen #include <cstdio> #include <algorithm> using namespace std; int si ...
- jqueryValidator自定义校验规则的一种方式（不覆盖源码）
1.封装自定义验证方法-validate-methods.js /***************************************************************** j ...
- CUDA笔记（八）
今天真正进入了攻坚期.不光是疲劳,主要是遇到的问题指数级上升,都是需要绕道的. 以visual profile来说,刚刚发现自己还没使用过. http://bbs.csdn.net/topics/39 ...