vue.js 2的表单控件
静下心，抄一段sample，以后可以快点到这里来抄。。。：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="demo.css" />
</head>
<body>
<div id="app">
<input type="text" v-model="message" />
<span>Your input is: {{ message }}</span>
<p></p>
<label><input type="radio" value="male" v-model="gender">男</label>
<label><input type="radio" value="female" v-model="gender">女</label>
<p>{{gender}}</p>
<input type="checkbox" v-model="checked" />
<span> checked: {{checked}}</span>
<p></p>
<label><input type="checkbox" value="1" v-model="multiChecked">1</label>
<label><input type="checkbox" value="2" v-model="multiChecked">2</label>
<label><input type="checkbox" value="3" v-model="multiChecked">3</label>
<p>multiChecked: {{multiChecked.join('|')}}</p>
<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<span> Selected: {{selected}}</span>
<p></p>
<select v-model="multiSelected" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<span> MultiSelected: {{multiSelected.join('|')}}</span>
<p></p>
<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b">
<span> checked: {{checked}}</span>
<p></p>
<input type="radio" v-model="checked" v-bind:value="a">
<span> checked: {{checked}}</span>
<p></p>
<select v-model="selected">
<option v-bind:value="{number: 123}"> 123</option>
</select>
<span> Selected: {{selected}}</span>
<p></p>
<div class="tab" v-bind:class="{'active': active, 'unactive': !active}">
</div>
<div v-bind:class="[classA, classB]"></div>
<div v-bind:style="alertStyle"></div>
</div>
<template v-if="yes">
<p>This is 1 dom</p>
<p>This is 2 dom</p>
<p>This is 3 dom</p>
<p>This is 4 dom</p>
</template>
</body>
<script src="http://cdn.bootcss.com/vue/2.2.4/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "",
gender: "",
checked: "",
multiChecked: [],
selected: "",
multiSelected: [],
a: "a",
b: "b",
yes: true,
active: true,
classA: 'class-a',
classB: 'class-b',
alertStyle: {
color: "red",
fontSize: "20px"
}
}
})
</script>
</html>
vue.js 2的表单控件的更多相关文章
- Vue.js学习笔记——表单控件实践
最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
- Vue 监视数据总结 && 表单控件使用总结
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- vue表单控件绑定（表单数据的自动收集）
v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...
- vue v-model 表单控件绑定
v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head ...
- vue指令：v-model绑定表单控件；v-model与v-bind结合使用
一.v-model绑定表单控件 v-model 双向数据绑定:一般用于表单元素,会忽略表单元素的value.checked.selected的初始值,且将Vue实例的数据作为数据来源. 1. 单行文本 ...
随机推荐
- Response响应工具类
技术交流群: 233513714 import com.google.common.base.Objects; import java.io.Serializable; public class Re ...
- Webpack标准配置
let htmlWebpckPlugin= require('html-webpack-plugin');//该组件能将src下面提定的html文件与打包后在js文件打包在一起module.expor ...
- 《Cracking the Coding Interview》——第9章：递归和动态规划——题目10
2014-03-20 04:15 题目:你有n个盒子,用这n个盒子堆成一个塔,要求下面的盒子必须在长宽高上都严格大于上面的.如果你不能旋转盒子变换长宽高,这座塔最高能堆多高? 解法:首先将n个盒子按照 ...
- Windows 2003 IIS服务器配置环境（放.net开发的网站）
配置IIS 安装.Net Framework3.5 安装SQL数据库 IIS的配置与安装步骤: 开始->管理工具->管理您的服务器->添加角色->(配置您的服务器向导)下一步- ...
- bash 语言的乘法表
#!/bin/bash ];then exit fi ; i<$; i++)); do ; j<=i; j++)); do tput setaf $j echo -ne "$j& ...
- makefile规则整理
makefile规则整理 实际开发中,makefile改的多,写的少. 为了后面不要在编译链接这种地方花费太多的时间,在这里系统性的整理其规则: 基本格式 TARGET : PREREQUISITES ...
- scrapy图片-爬取哈利波特壁纸
话不多说,直接开始,直接放上整个程序过程 1.创建工程和生成spiders就不用说了,会用scrapy的都知道. 2.items.py class HarryItem(scrapy.Item): # ...
- Linux开启MySQL远程连接
Linux开启MySQL远程连接的设置步骤 . MySQL默认root用户只能本地访问,不能远程连接管理MySQL数据库,那么Linux下如何开启MySQL远程连接?设置步骤如下: 1.GRANT命令 ...
- jQuery选择器示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- RabbitMQ vhost 配置
RabbitMQ vhost 配置 rabbitmqctl set_vhost_limits是用来定义虚拟主机限制的命令 配置最大连接限制 要限制vhost vhost_name中并发客户端连接的 总 ...