>>>>>>> html
<div id="app" >
<!-- 输入框绑定 -->
<input v-model='massage' placeholder="输入信息" >
<p>massage is:{{ massage }}</p>
<hr>
<!-- 单个选框绑定,返回值为布尔值 -->
<p>单个选框绑定,返回值为布尔值:</p>
<input v-model='radioStatus' type="checkbox" name="isAgree">
<br>
<label>数据:{{radioStatus}}</label> <hr>
<!-- 多个选框绑定到同一个数据 -->
<div>
<p> 多个选框绑定同一个数据: </p>
<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>
<!-- checkedNames 为一个数组 [] -->
<span>数据: {{ checkedNames }}</span>
</div>
<hr>
<div>
<p>单选按钮数据:</p>
<input type="radio" id="one" value="1" v-model="sex"><label for="one">{{stantic.garder[1]}}</label>
<input type="radio" id="two" value="2" v-model="sex"><label for="two">{{ stantic.garder[2] }}</label>
<input type="radio" id="three" value="3" v-model="sex"><label for="three">{{ stantic.garder[3] }}</label>
<br>
<!-- sex === 选中的input的value -->
<span>性别代码: {{ sex }};性别:{{stantic.garder[sex]}}</span>
</div>
<hr>
<div>
<p>选择列表:</p>
<select v-model="selected">
<option disabled value="">请选择</option>
<option value="001" >北京</option>
<option value="003" >天津</option>
<option value="008" >上海</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<hr>
<div>
<h3>值绑定:</h3>
<p>
对于单选按钮,勾选框及选择列表选项,v-model 绑定的 value 通常是静态字符串 (对于勾选框是逻辑值):
<br>
但是有时我们想绑定 value 到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串。 </p>
<!-- vm.toggle 和 vm.stantic.isOrNot 绑定 -->
<label>是否毕业:</label>
<input type="checkbox" name="" v-model='toggle' v-bind:true-value=stantic.isOrNot[1] v-bind:false-value=stantic.isOrNot[0] >
<!-- 选中时 vm.toggle === stantic.isOrNot[1] 未选中时 vm.toggle === stantic.isOrNot[0] -->
<p>您选择了:{{toggle}}</p> <h4>选择列表的值绑定字面量对象:</h4>
<select v-model="selected2">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
<option v-bind:value="{ number: 456 }">456</option>
<option v-bind:value="{ number: 789 }">789</option>
</select>
<span>vm.selected={{selected2}}</span>
</div>
<hr>
<div>
<h3>修饰符</h3> <h4>.lazy</h4>
<p>在默认情况下,v-model 在 <mark>input</mark> 事件中同步输入框的值与数据 (除了 上述 IME 部分),但你可以添加一个修饰符 lazy ,从而转变为在 <mark>change</mark> 事件中同步:</p>
<input v-model.lazy='massage' >
<p>输入完成,信息改变:{{massage}}</p> <h4>.number</h4>
<p>如果想自动将用户的输入值转为 Number 类型 (如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:</p>
<!-- vm.age的值类型是Number -->
<input type="number" v-model.number='age' >
<span>类型为:{{ typeof age }}</span> <h4>.trim</h4>
<p>如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:</p>
<input v-model.trim='massage' >
</div>
</div> // ------------------------------------------------------------------------------// >>>>>>js // 基础用法 v-model
let vm = new Vue({
el:'#app',
data:{
massage:'',
radioStatus:false,
checkedNames:[],
sex:'',
age:'',
toggle:'',
selected:'',
selected2:'',
stantic:{
garder:{
1:'男',
2:'女',
3:'不确定'
},
Hobbies:{ 1:'电影',
2:'美食',
3:'游戏',
4:'科技'
},
isOrNot:{
1:'是',
0:'否'
}
}
} });

Vue-表单输入绑定的更多相关文章

  1. Vue表单输入绑定(文本框和复选框)

    文本框 <!DOCTYPE html><html>    <head>        <meta charset="utf-8">  ...

  2. Vue表单输入绑定

    <h3>基础用法</h3> <p>你可以用<strong>v-model</strong>指令在表单input,textarea以及sele ...

  3. vue 表单输入绑定 checkbox

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

  5. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

  6. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  7. vue 表单输入与绑定 v-model

    vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...

  8. VUE:事件处理和表单输入绑定

    事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  9. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  10. Blazor和Vue对比学习(基础1.9):表单输入绑定和验证,VeeValidate和EditFrom

    这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...

随机推荐

  1. HashMap中的散列函数、冲突解决机制和rehash

    一.概述 散列算法有两个主要的实现方式:开散列和闭散列,HashMap采用开散列实现. HashMap中,键值对(key-value)在内部是以Entry(HashMap中的静态内部类)实例的方式存储 ...

  2. 我不知道的行高——line-height

    概述 对于块级元素,CSS属性line-height指定了元素内部line-boxes的最小高度. 对于非替代行内元素,line-height用于计算line box的高度. 对于替代行内元素,如bu ...

  3. idea出现Error:Maven Resources Compiler: Maven project configuration required for module 'market' isn't available.

    idea出现如下错误解决办法 1.重新在Build-Rebuild project 既可以解决啦

  4. IntentService源码

    原文地址IntentService源码分析 @Override public void onCreate() { super.onCreate(); HandlerThread thread = ne ...

  5. UVA-818 dfs + 位运算

    暴力枚举一些圆环,将这些圆环解开,看能否成为单链.判断单链的三个条件: 除了这些删除的圆环之外,其他圆环还连接着的圆环不能超过两个. 剩下的环没有连成圈. 剩下的圆环共分成m堆,每堆之间无连接,m必须 ...

  6. 天猫精灵X1智能音箱使用感想

    11.22音箱到手,等了刚好一个月. 主要是测评语音交互功能. 测试条件:正宗普通话. 1)问天气.温度:表现良好.2)找手机功能:试了多次,每次都说手机号码格式不对3)小孩听故事:正常.但是开头会有 ...

  7. JQuery基础知识学习1

    1.JQuery是javascript的类库 2.下载JQuery 3.导入JQuery <script src="jquery-3.0.0.js"></scri ...

  8. openstack-ocata-身份验证2

    Identity service 一.身份服务概述 OpenStack身份管理服务提供一个单点集成身份验证.授权和目录服务. 身份服务通常是第一个服务用户与之交互.一旦身份验证,最终用户可以使用自己的 ...

  9. 使用阿里云主机离线部署CDH步骤详解

    一.Linux文件系统准备 1. 拍摄快照 登录阿里云控制台,拍摄快照,注意有几个关键点尽量拍摄快照,系统初始状态.CM环境准备完成.CM安装完成.CDH安装完成. 2. 挂载设备 三个主机都执行. ...

  10. CSRF的本质及防御

    本质:产生的原因本质上是参数可知或可预测 防御: 1.加密参数:加密加盐,不可知,不可预测      忧虑,引入其他麻烦:一.数据分析困难                               ...