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. 单行文本 ...
随机推荐
- spark发现新词
package com.icklick.spark.wordSegment import org.apache.log4j.{ Level, Logger } import org.apache.sp ...
- Win10开始菜单中的天气不更新问题的解决方法
两台电脑同时做的Win10系统,最新的1703 Creator Update 版本,其中一台的开始菜单中天气方块总是显示图标,试了各种方法都不行,最后是点开天气App,在App的顶端有几个按钮,其中有 ...
- Jenkins拾遗--第一篇(安装Jenkins)
起因 近期由于工作需要做起了起了jenkins的维护.不做不知道,一搞发现里边全是小坑.两个月弄了一身泥.曾经小瞧了它,但是发现其实要弄好它不是那么容易的.有句知名的话"没有总结就没有提高. ...
- 《Cracking the Coding Interview》——第17章:普通题——题目12
2014-04-29 00:04 题目:给定一个整数数组,找出所有加起来为指定和的数对. 解法1:可以用哈希表保存数组元素,做到O(n)时间的算法. 代码: // 17.12 Given an arr ...
- 每天一个Linux命令(5):rm命令
rm命令可以删除一个目录中的一个或多个文件或目录,也可以将某个目录及其下属的所有文件及其子目录均删除掉.对于链接文件,只是删除整个链接文件,而原有文件保持不变. 语法 rm (选项)(参数) 选项 - ...
- Windows下如何解决git bash的默认home目录路径问题
转自:http://blog.csdn.net/lucien_zhou/article/details/62069246 为了解决这个问题,我在网上找了好久,尝试过按网上其他人所述,修改 git 安装 ...
- jekens介绍及服务搭建
https://blog.csdn.net/achuo/article/details/51086599 https://blog.csdn.net/qq_37372007/article/detai ...
- cocos2d安装
cocos2d引擎要求Python 2 为2.6 以上版本,Python 3 为3.3以上版本 cocos2d引擎安装支持pip安装,安装指令如下: pip install cocos2d
- ironic如何支持部署时按需RAID?
新浪大神推荐使用element proliant-tools制作deploy image.element proliant-tools会在ipa ramdisk中安装一个rpm包hpssacli(HP ...
- Leetcode 670.最大交换
最大交换 给定一个非负整数,你至多可以交换一次数字中的任意两位.返回你能得到的最大值. 示例 1 : 输入: 2736 输出: 7236 解释: 交换数字2和数字7. 示例 2 : 输入: 9973 ...