关于vue.js中表单控件绑定练习
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件绑定</title>
</head>
<body>
<!-- v-model在表单控件元素上实现数据的双向绑定 -->
<div id="app-1">
<input type="text" v-model="message" placeholder="请输入">
<p>{{message}}</p>
</div>
<!-- 单个勾选框 -->
<div id="app-2">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<!-- 多个勾选框绑定到同一数组 -->
<div id="app-3">
<input type="checkbox" id="checkboxjack" v-model="checkedNames" value="Jack">
<label for="checkboxjack">Jack</label>
<input type="checkbox" id="checkboxJohn" v-model="checkedNames" value="John">
<label for="checkboxJohn">John</label>
<input type="checkbox" id="checkboxMike" v-model="checkedNames" value="Mike">
<label for="checkboxMike">Mike</label>
<span>我是{{checkedNames}}</span>
</div>
<!-- 单选框 -->
<div id="app-4">
<input type="radio" id="man" value="man" v-model="sex">
<label for="man">man</label>
<input type="radio" id="woman" value="woman" v-model="sex">
<label for="woman">woman</label>
<span>选择的时是{{sex}}</span>
</div>
<!-- 单选列表 -->
<div id="app-5">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>我是{{selected}}</span>
</div>
<!-- 多选列表 绑定到数组-->
<div id="app-6">
<select v-model='selected' multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>我选择了{{selected}}</span>
</div>
<!-- 动态选项用v-for渲染 通过v-bind绑定value-->
<div id="app-7">
<select v-model='selected'>
<option v-for="item in items" v-bind:value="item.value">
{{item.text}}
</option>
</select>
<!-- v-model后的selected必须出现在data中 -->
<span>选择的是{{selected}}</span>
</div>
<!-- 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步： -->
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
<!-- 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值： -->
<input v-model.number="age" type="number">
<!-- 这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。.trim如果要自动过滤用户输入的首尾空格，可以添加.trim 修饰符到 v-model 上过滤输入： -->
<input v-model.trim="msg">
<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>
js:
var app1=new Vue({
el:'#app-1',
data:{
message:'开始'
}
});
var app2=new Vue({
el:'#app-2',
data:{
checked:false
}
});
var app3=new Vue({
el:'#app-3',
data:{
checkedNames:[]
}
});
var app4=new Vue({
el:'#app-4',
data:{
sex:''
}
});
var app5=new Vue({
el:'#app-5',
data:{
selected:''
}
});
var app6=new Vue({
el:'#app-6',
data:{
selected:[]
}
});
var app7=new Vue({
el:'#app-7',
data:{
selected: 'A',
items:[
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
});
关于vue.js中表单控件绑定练习的更多相关文章
- vue v-model 表单控件绑定
v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- 表单控件绑定v-model
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- vue2.0 之表单控件绑定
表单控件绑定v-model 1.文本 <template> <div> <input type="text" name="" v- ...
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- vue表单控件绑定（表单数据的自动收集）
v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...
- 037——VUE中表单控件处理之表单修饰符：lazy/number/trim
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- eclipse下的反编译
Eclipse 安装反编译插件jadclipse(经验总结) 根据网上搜集的材料以及亲身安装测试,总结经验如下,希望能够帮助有需要的朋友们,本总结有助于朋友们少走弯路哦!jadclipse可以帮助查看 ...
- visual studio code 安装python扩展
Ctrl+P 调出控制台,在控制台里输入ext install python,点击第一个安装 如果出现: visual studio code connect ETIMEDOUT 191.238.17 ...
- JavaScript中style, currentStyle和 getComputedStyle的异同
今天在做项目的时候,习惯性的用到了element.style.width,然而浏览器却报错,错误提示是style is undefined,这是我才意识到,内联样式表和外联样式表在js应用中也有很大的 ...
- 《我是一只IT小小鸟》读后感
过了半个学期的大学生活,说实话,我是迷茫的,因为我还没有足够的了解IT这门课程,也不知道怎么学好这门课程. 直到老师推荐我们读一本书<我是一只it小小鸟>,起初,我并不认为它是一本多么好的 ...
- 使用Object类型的多态引用是会付出代价的
import java.util.*; public class FiveShi { String name; public void eat(){ System.out.println(" ...
- MYSQL 处理批量更新数据的一些经验。
首先,我们需要了解下MYSQL CASE EXPRESSION 语法. 手册传送门:http://dev.mysql.com/doc/refman/5.7/en/control-flow-functi ...
- 野心勃勃的React组件生命周期
当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件 React实现了UI=Fn(St ...
- 存储过程详解与java调用（转）
存储过程的一些基本语法: --------------创建存储过程----------------- CREATE PROC [ EDURE ] procedure_name [ ; number ] ...
- The Pragmatic Programmer Quick Reference Guide
1.关心你的技艺 Care About Your Craft 如果不在乎能否漂亮地开发出软件,你又为何要耗费生命去开发软件呢? 2.思考!你的工作 Think! About Your Work 关掉自 ...
- Android Studio 常用快捷键
继承Eclipse的快捷键 : File->Settings->Keymap->有一个Keymaps 下拉菜单,选择Eclipse. 这里讲主要常用的快捷键 : Ctrl ...