1.v-model指令

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            var vm = new Vue({

                el:'#box',

                data:{

                    msg:'Hello Vue!'

                }

            });

        }

    </script>

</head>

<body>

    <div id="box">

        <input type="text" v-model="msg"/><br/>

        {{msg}}

    </div>

</body>

</html>

Vue控制id="box"这个DIV元素，同时在 HTML模板上使用双花括号{{xxxx}}语法，来访问data中定义的数据。
通过v-model 指令，我们把msg 数据绑定到了input文本框，我们修改文本框的值，发现msg 数据改变了。

2.注意：定义的数据是数组或者json

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            var vm = new Vue({

                el:'#box',

                data:{

                    msg:'Hello Vue!',

                    arr:['1','2','3'],

                    json:{a:'a',b:'b'}

                },

                methods:{

                    getData(){

                        console.log(this.msg);

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="box">

        <input type="text" v-model="msg" @input="getData"/><br/>

        {{msg}} <br/>

        {{arr}} <br/>

        {{json}}

    </div>

</body>

</html>

效果图：

.

vue2.X v-model 指令的更多相关文章

  1. Vue2.x directive自定义指令

    directive自定义指令 除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令. 注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的 ...

  2. Vue2学习笔记:v-show指令

    v-show指令:v-show="true/false" 控制元素显示/隐藏 1.使用 <!DOCTYPE html> <html> <head> ...

  3. Vue2学习笔记:v-for指令

    1.使用 <!DOCTYPE html> <html> <head> <title></title> <meta charset=&q ...

  4. Vue2学习笔记:v-model指令

    1.v-model指令 <!DOCTYPE html> <html> <head> <title></title> <script s ...

  5. vue2.0  之 directive指令 (自定义)

    指令 一.定义: 指令只一种可以附加到DOM元素的微命令(tiny commands). 它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致 ...

  6. vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案

    在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: 比如下面的代码,div.descBox里面的p标签的color样式并不是"color: blue" ...

  7. v:bind指令对于传boolean值的注意之处

    1,

  8. Vue（1）

    一:概述 Vue是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用.Vue的核心库只关心视图层,不仅易于上手,还便于与第三方库或既有项目 ...

  9. 第六十二篇：Vue的双向绑定与按键修饰符

    好家伙,依旧是vue的基础 1.按键修饰符 假设我们在一个<input>框中输入了12345,我们希望按一下"Esc" 然后删除所有前面输入的内容,这时候,我们会用到按 ...

  10. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_04-vuejs研究-vuejs基础-v-model指令

    <!DOCTYPE html> <html lang="en" xmlns:v‐on="http://www.w3.org/1999/xhtml&quo ...

随机推荐

  1. UNet简单案例讲解

    1.创建文件夹: 2.创建一个空物体,添加如下组件: Network Manager(网络管理组件): Network Manager HUD(提供一个UI): 3.创建如下模型,并设置为预制体: 给 ...

  2. 【bzoj3998】[TJOI2015]弦论 后缀自动机+dp

    题目描述 对于一个给定长度为N的字符串,求它的第K小子串是什么. 输入 第一行是一个仅由小写英文字母构成的字符串S 第二行为两个整数T和K,T为0则表示不同位置的相同子串算作一个.T=1则表示不同位置 ...

  3. java连接mysql数据库 三 实现增删改查操作

    同以前一样,先写一个数据库打开和关闭操作类 public class DBConnection { String driver = "com.mysql.jdbc.Driver"; ...

  4. ionic2 解决白屏问题

    ionic2下创建项目后,运行启动页后白屏几秒,解决方案 问题描述 最近在学习过程中发现ionic2项目运行在真机上,启动页后会有3-5秒的白屏时间,用户体验不是太好. 解决过程 查看到了一篇关于这个 ...

  5. 【CCF】JSON查询

    #include<iostream> #include<cstdio> #include<string> #include<cstring> #incl ...

  6. 【原创】datalist repeater 控件的行鼠标单击 以及 滑过特效

    原文发布时间为:2009-05-06 -- 来源于本人的百度文章 [由搬家工具导入] 调用方法如：<tr id="<%# Container.ItemIndex+1 %>& ...

  7. 用正则表达式把页面中的px全部替换成rem

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. XmlRootElement

    作用是 java对象 <---> xml文件   之间的转换 JAXB Annotation @XmlRootElement   // xml 文件的根元素 @XmlElement @Xm ...

  9. [SaltStack] Return日志入库审计

    SaltStack日志return审计 在我们执行salt任务时, 默认日志是屏幕打印的, 对于我们审计任务运行情况带来很不方便, 因此我们对日志结果进行了二次开发, 将job日志处理后入库, 方便查 ...

  10. C#反射(Reflection)详解

    1. 什么是反射2. 命名空间与装配件的关系3. 运行期得到类型信息有什么用4. 如何使用反射获取类型5. 如何根据类型来动态创建对象6. 如何获取方法以及动态调用方法7. 动态创建委托 1.什么是反 ...