vue的v-model指令
v-model指令用来绑定表单,数据传值。


如上,当在信息1输入框(表单)中输入值时,数据会对应变化;在信息2输入框中输入值时,数据并未变化。
<div id="app">
<form>
<p>
<input type="text" v-model="message1">
</p>
<p>
<input type="text" v-model="this.message2">
</p>
</form>
<p>
{{ message1 }}
</p>
<p>
{{ message2 }}
</p>
</div> <script type="text/javascript">
new Vue({
el: "#app",
data: {
message1:"信息1",
message2:"信息2"
}
})
</script>

由于在信息2的input输入框中,v-model指令中使用了this.message,导入无法将表单与data中的数据进行绑定。
结论:
使用v-model指令时,只需要v-model="message",data:{message:"信息1"}结合使用,即可实现表单与数据的双向绑定,在该文件中不论何处(methods中)this.message都可以得到该message的值。
vue的v-model指令的更多相关文章
- Vue.js之常用指令
vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...
- 1.Vue.js的常用指令
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...
- VUE:内置指令与自定义指令
VUE:内置指令与自定义指令 常用的内置指令 1)v:text 更新元素的 textContent 2)v-html 更新元素的 innerHTML 3)v-if 如果为true,当前标签才会输出到页 ...
- Vue API(directives) 自定义指令
前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...
- vue自定義指令
自定義指令可以允許代碼複用, 全局自定義指令 vue.directive('指令名',{鉤子函數:指令函數}) 局部自定義指令: vue({ directives:{指令名:{鉤子函數:指令函數} } ...
- Vue(四) 内置指令
现在介绍 Vue.js 中 更多的内置指令 基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,经常和 CSS 的 display: ...
- 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令
最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...
- vue教程2-07 自定义指令
vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...
- Vue 框架-07-循环指令 v-for,和模板的使用
Vue 框架-07-循环指令 v-for,和模板的使用 本章主要是写一些小实例,记录代码,想要更详细的话,请查看 官方文档:https://cn.vuejs.org/v2/guide/#%E6%9D% ...
- vue 组件内 directives指令的调用方式 <base-table v-auto-height:tableHeight="{vm:this, diffHeight:ahTable.diffHeight}"
vue 组件内 directives指令的调用方式 <base-table v-auto-height:tableHeight="{vm:this, diffHeight:ahTabl ...
随机推荐
- Android launcher 壁纸 wallpaper
壁纸分为动态和静态两种: 如果只需要修改默认静态壁纸,替换frameworks/base/core/res/res/drawable/default_wallpaper.jpg即可,或者在源码中修改对 ...
- ConchAPI | 更智能的API监控,提升团队效率
“昨天调好的API,怎么又挂了,竟然没有人发现?” “喂喂喂,你的API挂了,无法调用成功?哪里出问题了?” “这段时间的API数量越来越多了,有谁能好好理清下?” 现在服务端技术越来越讲究微服务化, ...
- 《SQL CookBook 》笔记-第三章-多表查询
目录 3.1 叠加两个行集 3.2 合并相关行 3.3 查找两个表中相同的行 3.4 查找只存在于一个表中的数据 3.5 从一个表检索与另一个表不相关的行 3.6 新增连接查询而不影响其他连接查询 3 ...
- Microsoft Visual Studio 2012 添加实体数据模型
Microsoft Visual Studio 2012 添加实体数据模型 1.创建一个web项目 2.添加ADO实体数据模型,如下图: 3.选择 从数据库生成,然后下一步 4.新建连接,如下图: ...
- Java基础系列--08_集合1
---恢复内容开始--- 集合当中有很多都是应用到泛型的技术,所以在讲集合之前,应该先将泛型的概念普及一下. 泛型: (1)泛型是一种类型,但是这种类型是在编译或者调用方法时才确定. (2 ...
- centos基本命令
$>ls $>ls --help //查看命令帮助 $>man ls //查看命令帮助 $>clear //清屏 $>cd /home //切换目录 $>cd . ...
- IBM developer:Setting up the Kafka plugin for Ranger
Follow these steps to enable and configure the Kafka plugin for Ranger. Before you begin The default ...
- zabbix-agent(zabbix-proxy)配置
PidFile=/var/run/zabbix/zabbix_agentd.pidLogFile=/var/log/zabbix/zabbix_agentd.logLogFileSize=30Serv ...
- jmeter(二十六)生成HTML性能测试报告
性能测试工具Jmeter由于其体积小.使用方便.学习成本低等原因,在现在的性能测试过程中,使用率越来越高,但其本身也有一定的缺点,比如提供的测试结果可视化做的很一般. 不过从3.0版本开始,jmete ...
- ASP.NET Core RSA加密或解密
前言 这两天主要是公司同事用到了RSA加密,事后也看了下,以为很简单,最终利用RSACryptoServiceProvider来实现RSA加密,然后大致了解到RSACryptoServiceProvi ...