文档章节

Vue.js学习系列(三十七)-- Vue.js表单

博为峰教研组
 博为峰教研组
发布于 2017/03/20 14:02
字数 217
阅读 27
收藏 0

这里我们为大家介绍 Vue.js 表单上的应用。

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>表单</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

input元素:<input v-model="message" placeholder="请输入信息">

<p>消息是:{{message}}</p>

textarea元素:<textarea v-model="message2" placeholder="请输入信息"></textarea><br>

<p>消息是:{{message2}}</p>

</div>

<script type="text/javascript">

new Vue({

el:"#app",

data:{

message:"Runoob",

message2:'百度\r\nhttp://www.baidu.com'

}

})

</script>

</body>

</html>

运行结果:

 

由运行结果,可以看出修改input中的元素后,input后面消息是后面的内容也会随着改变。同样修改textarea中的内容,它后面的消息是的值也会发生改变。

© 著作权归作者所有

博为峰教研组
粉丝 51
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
Vue新手向:14篇教程带你从零撸一个Todo应用

欢迎来到 Vue2.x Todo 系列教程,这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo(待办事项)应用。 书写此教程的动机 Vue 作者尤雨溪在 新手向:Vue 2.0 的建议学习顺序 中给出了中肯...

追梦人物
01/16
0
0
好程序员web前端分享菜鸟Vue学习笔记(二)

好程序员web前端分享菜鸟Vue学习笔记(二),今天天气不错,心情也不错,最近学习Vue越来越顺利了,今天接着学习,接着记录。 首先,来学习下常用的v-bind属性,它的作用是在属性中使用vue中...

好程序员IT
05/09
30
0
Vue实现前后端分离项目的初体验

Vue实现前后端分离项目的初体验 经过之前学习的Vue的知识: vue基本指令 vue组件 vue-resource vue路由 其实我们已经可以开始实战运用到实际的Web项目中了,由于本人是Java后端开发的,所以后...

TyCoding
2018/09/01
2.3K
1
设计模式在vue中的应用(六)

前言 目录整理: 设计模式在vue中的应用(一) 设计模式在vue中的应用(二) 设计模式在vue中的应用(三) 设计模式在vue中的应用(四) 设计模式在vue中的应用(五) 设计模式在vue中的应用...

hailx
02/25
0
0
好程序员Web前端教程分享Vue学习心得

好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于...

好程序员IT
04/10
40
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux 运行shell文件,出现 $'\r': command not found

运行编写的shell脚本时,出现了 $'\\r': command not found 这样的错误提示。 报错的原因是我们在windows系统操作时,编辑器里的换行符是\r\n ,而Linux上为\n,两个系统之间有差异导致的。 ...

芥末无敌
今天
10
0
Java数据结构(上)

枚举(Enumeration) 位集合(BitSet) 向量(Vector) 栈(Stack) 1.Enumeration(枚举) boolean hasMoreElements( ):测试是否有更多的元素 Object nextElement( ):如果此枚举对象至少还...

Firefly-
昨天
17
0
vue 跨层组件通讯 provide inject

https://cn.vuejs.org/v2/api/#provide-inject 类型: provide:Object | () => Object inject:Array<string> | { [key: string]: string | Symbol | Object } 详细: provide 和 inject 主......

阿豪boy
昨天
14
0
黑马程序员面试宝典(Java)Beta6.0免费下载

场景 JavaSE基础 面向对象特征以及理解 访问权限修饰符区别 理解clone对象 JavaSE语法 java有没有goto语句 &和&&的区别 如何跳出当前的多重嵌套循环? 是否可以继承String? 重载与重写的区别...

badaoliumang
昨天
14
0
监控linux系统状态

查看系统负载: w/uptime 最后面三个数字表示1分钟,5分钟,15分钟平均有多少个进程占用CPU 占用CPU的进程可以是Running,也可以是Waiting 某一时刻1颗CPU只能有一个进程在使用其资源 #查看c...

asnfuy
昨天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部