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. 环境说明与HelloWorld

    本人采用的是ExtJs4.2版本,采用WebStorm作为IDE开发工具 目录说明 builds:压缩后的ExtJs代码 docs:文档 examples:官方示例 locale:多国语言的资源文件 ...

  2. 【bzoj2529】[Poi2011]Sticks 贪心

    题目描述 给出若干木棍,每根木棍有特定的颜色和长度.问能否找到三条颜色不同的木棍构成一个三角形.(注意这里所说的三角形面积要严格大于0) 输入 第一行给出一个整数k(3<=k<=50),表 ...

  3. JS 处理json数据

    $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 JSON.parse(jsonstr); //可以将js ...

  4. WF 18 A 想法

    UPD:我理解错题意了. 考虑在时刻 $t$ 从站点 $u$ 出发的公交车,将这些车的集合记做 $B(u,t)$,$B(u,t)$ 是个随机变量. 令 $\mathrm{Pr}_{B(u,t)} = ...

  5. 自制wifi信号放大器

    自制wifi信号放大器 只要家里安装了一台无线路由器,在家里的任何地方都可以使用带上网功能的电子产品上网,但是由于距离的问题,WiFi信号有强弱之分,离无线路由器稍微远点,信号就有所降低,上网速度受影 ...

  6. 序列(seq)

    序列(seq) 题目描述 给定 N,A,BN,A,B,构造一个长度为 NN 的排列,使得: 排列长度为 N: 最长上升子序列长度为 A: 最长下降子序列长度为 B. 我们有 SPJ,有解任意给出一组, ...

  7. markdown的使用说明

    markdown 你很牛 说点废话 背景 md 经常喜欢写点东西的人,是不是觉得用各种笔记软件或者是html,排版总是让你感到蛋蛋的忧伤,本来满腹经纶,最后由于不好排版,阅读体验差,最后...but. ...

  8. svg图片做图标字体

    https://icomoon.io 这个网站,把svg变图标

  9. 解决当打开Unity时 提示项目已经打开，而自己之前并没有打开过（可能之前异常关闭）的问题

    当打开Unity时 提示项目已经打开,而自己之前并没有打开过(可能之前异常关闭) 发生这种情况时 打开项目目录中的 Temp文件夹,可以找到 一个 UnityLockfile 文件 将这个文件删除就可 ...

  10. c++ 中 define

    1.简单的define定义 #define MAXTIME 1000 一个简单的MAXTIME就定义好了,它代表1000,如果在程序里面写 if(i<MAXTIME){.........} 编译 ...