文档章节

Vue.js -表单控件绑定

tianyawhl
 tianyawhl
发布于 2017/08/29 09:46
字数 1310
阅读 14
收藏 0
点赞 0
评论 0

基础用法
你可以用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素,但v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子,v-model 会忽略所有表单元素的value 、checked、selected特性的初始值。因为它会选择Vue实例数据来作为具体的值。你应该通过JavaScript在组件的data选项中声明初始值
文本

<body class="">
    <div id="example-1">
       <input type="text" v-model="message" placeholder="edit me">
       <p>{{message}}</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        data:{
            message:""
        }
    })
    </script>
</body>

 

多行文本

<body class="">
    <div id="example-1">
      <span>multiline message is:</span>
      <p style="white-space:pre-line">{{message}}</p>
      <textarea v-model="message" cols="30" rows="10" placeholder="add multiple lines"></textarea>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        data:{
            message:""
        }
    })
    </script>
</body>

//pre-line 合并空白符序列,但是保留换行符,意思是单词之间如果有多个空格,合并成一个空格,按回车键换行

在文本区域插值(<textarea></textarea>)并不生效,应用v-model来代替 ,即<textarea></textarea>不能使用{{message}这种形式

 

复选框
单个复选框,逻辑值

<body class="">
    <div id="example-1">
      <input type="checkbox" id="checkbox" v-model="checked">
      <label for="checkbox">{{checked}}</label>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        data:{
            checked:true
        }
    })
    </script>
</body>

 

多个复选框,绑定到同一个数组,并把选中的按列表显示出来例子

<body class="">
    <div id="example-1">
        <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
        <label for="jack">jack</label>
        <input type="checkbox" id="join" value="join" v-model="checkedNames">
        <label for="join">join</label>
        <input type="checkbox" id="lily" value="lily" v-model="checkedNames">
        <label for="lily">lily</label>
        <ul>
            <li v-for="item in checkedNames">{{item}}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        data: {
            checkedNames: []
        }
    })
    </script>
</body>

单选按钮

<body class="">
    <div id="example-1">
       <input type="radio" id="one" value="One" v-model="picked">
       <label for="one">One</label>
       <input type="radio" id="two" value="Two" v-model="picked">
       <label for="two">Two</label>
       <div>{{picked}}</div>
        
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        data: {
            picked: "One"
        }
    })
    
    </script>
</body>

//选中时显示的是value的值,通过v-model 指向同一个picked,就表明这几个单选框是一组

 

选中列表
单选列表

<body class="">
    <div id="example-1">
      <select v-model="selected">
          <option value="" disabled>请选择</option>
          <option>A</option>
          <option>B</option>
          <option>C</option>
      </select>
      <div>选择了:{{ selected }}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        data: {
            selected: ""
        }
    })
    //在下拉列表中,请选择的value属性设置为空,否则option初始化显示为空,其余的option的value属性不设置,也不能设置为空,因为显示的内容优先显示value的值而不是option的内容
    </script>
</body>

如果v-model表达初始的值不匹配任何选项(为空),select元素会以“未选中”的状态渲染,像以上提供的disabled选项是建议的做法

动态选项,用v-for渲染

<body class="">
    <div id="example-1">
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
        </select>
        <div>选择了:{{ selected }}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        data: {
            selected: "A",
            options: [
                { text: "one", value: "A" },
                { text: "two", value: "B" },
                { text: "three", value: "C" },
            ]
        }
    })
    </script>
</body>

 

对于单选按钮,勾选框及选择列表选项,v-model绑定的value通常是静态字符串(对于复选框是逻辑值)
<!-- 当选中时,`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false,单个的复选框toggle只能是true或者false,多个的话可以绑定到一个数组并分别设置value -->
<input type="checkbox" v-model="toggle">

<!-- 当选中时,`selected` 为字符串 "abc" 如果option没有value属性 则`selected` 为字符串 "ABC"-->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但是有时我们想绑定value到Vue实例的一个动态属性上,这时可以用v-bind实现,并且这个属性的值可以不是字符串,而是表达式,

复选框   当选中复选框时显示的是"your selected"

<body class="">
    <div id="example-1">
       <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
       <div>{{toggle}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        data: {
            toggle:"",
            a: "your selected",
            b: "not select"
        }
    })
    </script>
</body>

单选按钮

<body class="">
    <div id="example-1">
       <input type="radio" v-model="pick" v-bind:value="a" >
       <input type="radio" v-model="pick" v-bind:value="b" >
       <div>{{pick}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        data: {
            pick:"",
            a: "your selected a",
            b: "your selected b",
           
        }
    })
    </script>
</body>

选择列表设置

<body class="">
    <div id="example-1">
        <select v-model="selected">
            <option v-bind:value="{number:1234}">123</option>
        </select>
        <div>{{selected.number}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        data: {
            selected: "",
        }
    })
    </script>
</body>

 

修饰符
.lazy

默认情况下,v-model 在input事件中同步输入框的数据,但你可以添加一个修饰符lazy,从而转变为在change事件中同步,当输入完,点击其它地方

<body class="">
    <div id="example-1">
        <input v-model.lazy="msg">
        <div>{{msg}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        data: {
            msg: "",
        }
    })
    </script>
</body>

.number
如果想自动将用户输入值转为Number类型(如果原值的转换结果为NaN则返回原值),可以添加一个修饰符number给v-model来处理输入值
<input v-model.number="age" type="number">

.trim
如果要自动过滤用户输入的首尾空格,可以添加trim修饰符到v-model上过滤输入
<input v-model.trim="msg">

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 1
博文 195
码字总数 92486
作品 0
常州
前端工程师
[vue] 表单输入格式化,中文输入法异常

v-model 是 vue.js 提供的语法糖,根据不同的表单控件监听不同的事件,实现对表单控件的数据双向绑定。当控件是输入框时,v-model 监听其 input 事件。如下所示,这两种写法有什么区别吗? ...

张跃迁不想说话
05/30
0
0
Vue和React数据绑定对比

在数据绑定上来说,vue的特色是双向数据绑定,而在react中是单向数据绑定。 一 单向和双向数据绑定其实不是完全没关系的 表单的双向绑定,说到底不过是 (value 的单向绑定 + onChange 事件侦...

pattyzzh
05/14
0
0
[译]如何优雅地用 Vue 创建数据驱动的用户界面

翻译: 珈蓝 from 迅雷前端 翻译自 Evan Schultz 的文章 Do it with Elegance: How to Create Data-Driven User Interfaces in Vue 本文演示了如何利用 Vue 的动态组件根据 schema 来生成一个...

迅雷前端
06/04
0
0
中江吴彦祖/vue-formbuilder

基于Vue + Vue.Draggable实现自定义表单控件 新项目需要用到工作流设定 + 自定义表单控件,这里列出了自定义表单控件的代码实现,可实现自定义表单控件,可拖拽排序,自定义属性 效果预览 运行...

中江吴彦祖
06/30
0
0
前端框架之Vue.js 库的使用

vue.js简介 Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。 Vue.js可以作为一个js库来使用,也可以用...

玄学酱
06/22
0
0
Vue + ElementUI 后台管理系统项目心得(二)

此篇是关于 Vue 的总结。Js 的总结请见前一篇:Vue + ElementUI 后台管理系统项目心得(一) 话说过完年回来,仿佛一夜之间身边的人都在谈论 Vue,相关的组件也如雨后春笋一般涌现出来,比如...

OSIMLY
2017/03/27
0
0
前端框架Vue(7)——Vue+ElementUI:简易login登录框重构

目标:Vue 来实现一个简易的登录框,有 用户名(user)和 密码(password),具备简单的校验。 使用的UI框架:ElementUI vue 登录框的优点: 无须操作 dom,只需建立数据模型,自动渲染。 双向...

docallen
2017/04/14
0
0
Vue笔记(6) - v-for详解及set方法

https://cn.vuejs.org/v2/guide/list.html 1、key 当 Vue.js 用 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的...

神奇的小卷毛
04/22
0
0
Vue中你不知道但却很实用的黑科技

本文纯技术干货,首发于 掘金,转载请注明出处和作者。 最近数月一直投身于 iView 的开源工作中,完成了大大小小 30 多个 UI 组件,在 Vue 组件化开发中积累了不少经验。其中也有很多带有技巧...

Aresn
07/04
0
0
Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704
2017/04/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

微信小程序Java登录流程(ssm实现具体功能和加解密隐私信息问题解决方案)

文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源。 一、登录流程图 二、小程序客户端 doLogin:function(callback = () =>{}){let ...

公众号_好好学java
12分钟前
0
0
流利阅读笔记28-20180717待学习

“我不干了!” 英国脱欧大臣递交辞呈 雪梨 2018-07-17 1.今日导读 7 月 6 日,英国政府高官齐聚英国首相的官方乡间别墅——契克斯庄园,讨论起草了一份关于英国政府脱欧立场的白皮书。可是没...

aibinxiao
42分钟前
4
0
OSChina 周二乱弹 —— 理解超算排名这个事,竟然超出了很多人的智商

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @-冰冰棒- :分享Ed Sheeran/Beyoncé的单曲《Perfect Duet (with Beyoncé)》 《Perfect Duet (with Beyoncé)》- Ed Sheeran/Beyoncé 手机...

小小编辑
52分钟前
33
5
Android 获取各大音乐平台的真实下载地址

废话 电脑使用谷歌浏览器或者QQ浏览器的时候。。。。。。。说不清楚,还是看图吧 大概意思就是,只要网页上需要播放,只要能播放并且开始播放,这个过程就肯定会请求到相关的音乐资源,然后就...

她叫我小渝
今天
0
0
shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
今天
2
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
今天
1
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
2
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
1
1
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部