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. IIS8 不能在此路径中使用此配置节。如果在父级别上锁定了该节

    问题: 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的(overrideModeDefault="Deny"),或者是通过包含 overr ...

  2. Codeforces #990E Post Lamp

    题目大意 今欲用若干条长为 $k$($1\le k\le m, k\in \mathbb{Z}$) 的线段覆盖数轴上 $[0,n]$ 这一段.线段的起点(左端点)必须为 $[0, n-1]$ 中的某个 ...

  3. django学习——通过get_FOO_display 查找模型中的choice值

    在django的models.py 中,我们定义了一些choices的元组,类似一些字典值,一般都是下拉框或者单多选框,例如 0对应男 1对应女等. class Area(models.Model): ...

  4. 开启dns服务时,/etc/init.d/named start 卡住了的解决办法。

    在命令行输入 rndc-confgen -r /dev/urandom -a  再次开启服务 /etc/init.d/named  start ok

  5. Javascript&Html-location对象

    Javascript&Html-location对象 location对应是BOM最有用的对象之一,她提供了当前窗口中加载的文档的信息,并提供了一些导航的功能.location对象有一个特别的 ...

  6. 局部a链接样式

    原文发布时间为:2010-01-16 -- 来源于本人的百度文章 [由搬家工具导入] <style type="text/css"> <!--默认页面链接-> ...

  7. 【全局变量】mysql查看全局变量以及设置全局变量的值

    1.查看mysql的所有全局变量的值 SHOW GLOBAL VARIABLES 或者 SHOW VARIABLES mysql有很多全局变量,包括系统的一些基本信息,以及mysql的一些基本配置都可 ...

  8. template相关

    template模板是c++中支持多态的工具,使用模板可以使用户为类或函数声明一种一般的模式,使得该模板试用于任意类型的参数. 函数模板: 定义如下: template <typename T& ...

  9. map、hash_map、unordered_map 的思考

    #include <map> map<string,int> dict; map是基于红黑树实现的,可以快速查找一个元素是否存在,是关系型容器,能够表达两个数据之间的映射关系. ...

  10. H5页面唤起手机号

    做手机H5页面的时候经常会碰到在某一个页面会显示一个手机号,坑爹的产品会说你点击一下能不能让手机弹出号码,然后拨打出去,我试了试各种百度来的方法都是失败的,比如下面的这个: <a href=&q ...