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指令的更多相关文章

  1. Vue.js之常用指令

    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...

  2. 1.Vue.js的常用指令

      Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...

  3. VUE:内置指令与自定义指令

    VUE:内置指令与自定义指令 常用的内置指令 1)v:text 更新元素的 textContent 2)v-html 更新元素的 innerHTML 3)v-if 如果为true,当前标签才会输出到页 ...

  4. Vue API(directives) 自定义指令

    前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...

  5. vue自定義指令

    自定義指令可以允許代碼複用, 全局自定義指令 vue.directive('指令名',{鉤子函數:指令函數}) 局部自定義指令: vue({ directives:{指令名:{鉤子函數:指令函數} } ...

  6. Vue(四) 内置指令

    现在介绍 Vue.js 中 更多的内置指令 基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,经常和 CSS 的 display: ...

  7. 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

    最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...

  8. vue教程2-07 自定义指令

    vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...

  9. Vue 框架-07-循环指令 v-for,和模板的使用

    Vue 框架-07-循环指令 v-for,和模板的使用 本章主要是写一些小实例,记录代码,想要更详细的话,请查看 官方文档:https://cn.vuejs.org/v2/guide/#%E6%9D% ...

  10. 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 ...

随机推荐

  1. 基于python的种子搜索网站,你懂得!

    该项目是基于python的web类库django开发的一套web网站,给师弟做的毕业设计.本人的研究方向是一项关于搜索的研究项目.在该项目中,笔者开发了一个简单版的搜索网站,实现了对数据库数据的检索和 ...

  2. DVWA 黑客攻防演练(十一) 存储型 XSS 攻击 Stored Cross Site Scripting

    上一篇文章会介绍了反射型 XSS 攻击.本文主要是通过 dvwa 介绍存储型 XSS 攻击.存储型 XSS 攻击影响范围极大.比如是微博.贴吧之类的,若有注入漏洞,再假如攻击者能用上一篇文章类似的代码 ...

  3. windowsServer部署站点

    ### windowsServer部署站点 前言:最近在和朋友一起买了个服务器,奈何他选的是windowsServer,无所谓了,就把自己的站点从之前的虚拟主机迁过来,记录下. 准备工作: 服务器上搭 ...

  4. mysql export mysqldump version mismatch upgrade or downgrade your local MySQL client programs

    I use MySQL Community Edition and I solved this problem today. goto https://dev.mysql.com/downloads/ ...

  5. firewalld简介及功能

    1. firewalld简介 firewalld是CentOS7/Red Hat7的一大特性,最大的好处有两个: 第一个支持动态更新,不用重启服务: 第二个就是加入了防火墙的zone概念 firewa ...

  6. vuetify

    vue add vuetify打包之后再发过来另外剪头发 typescript 1.配置 2.当用 let 声明一个变量,它使用的是词法作用域或块作用域. let与var区别,所以要--- 3.看来 ...

  7. python day06

    深浅拷贝 1.值拷贝 ls1 = [1,2,3] ls2 = ls1 #ls2直接把栈区里ls1存的地址拿过来,也指向堆区里列表的id #原列表发生ls1改变(不是重新赋值),ls2也跟着发生改变 2 ...

  8. 华为笔记HOSTS,便于访问云端存储

    # Copyright (c) - Microsoft Corp. # # This is a sample HOSTS file used by Microsoft TCP/IP for Windo ...

  9. Neutron Vlan Network 学习

    vlan network 是带 tag 的网络,是实际应用最广泛的网络类型.    下图是 vlan100 网络的示例.   1. 三个 instance 通过 TAP 设备连接到名为 brqXXXX ...

  10. HTML基础知识个人总结

    [学习的网站是主要是W3school,还加上一些其他搜索学习到的内容,仅在博客做个人整理] 一.标签——尖括号围成的关键词,成对出现. ※使用时必须符合标签嵌套规则 1. (1) <!DOCTY ...