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. jQuery动画的hover连续触发动画bug处理

    一.问题 为元素设置hover上实现动画的效果,当鼠标反复快速进入元素时,动画会在鼠标停止后依然执行,导致动画和鼠标的动作不一致. 二.解决方法 要解决这种问题,可以使用jquery的stop()方法 ...

  2. JAVA简易的注册会员系统

    public class Login { public static void main(String[] args) { System.out.println("*****欢迎进入注册系统 ...

  3. 【VBA】全局常量定义

    [说明] 全局常量定义 Public Const RESULT_SHEET As String = "result" Public Const APPROVER_START_CEL ...

  4. [暑假集训--数论]poj2142 The Balance

    Ms. Iyo Kiffa-Australis has a balance and only two kinds of weights to measure a dose of medicine. F ...

  5. 【NOIP2009】最优贸易

    描述 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一部分为双向通行的道路,双向通 ...

  6. .NET中如何有效的使用Cache

    原文发布时间为:2009-09-30 -- 来源于本人的百度文章 [由搬家工具导入] 　　Cache 即高速缓存 ，我想很多人对他的第一印象一定像我一样，感觉他一定能提高系统得性能和运行速度。 　　C ...

  7. poj 3693 Maximum repetition substring 重复次数最多的连续子串

    题目链接 题意 对于任意的字符串,定义它的 重复次数 为:它最多可被划分成的完全相同的子串个数.例如:ababab 的重复次数为3,ababa 的重复次数为1. 现给定一字符串,求它的一个子串,其重复 ...

  8. MSP430 G2553 寄存器列表与引脚功能

    USCI_B0 USCI_B0 发送缓冲器UCB0TXBUF 06Fh USCI_B0 接收缓冲器UCB0RXBUF 06Eh USCI_B0 状态UCB0STAT 06Dh USCI B0 I2C ...

  9. Linux firmware 加载【转】

    转自:http://blog.chinaunix.net/uid-22028680-id-3157922.html 1.request_firmware在内核使用,需要文件系统支持,就是说,启动的时候 ...

  10. interview fb2

    2014.7.8fb #include <iostream> using namespace std; struct TreeNode{ int val; TreeNode *left; ...