vue2.X v-model 指令
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 指令的更多相关文章
- Vue2.x directive自定义指令
directive自定义指令 除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令. 注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的 ...
- Vue2学习笔记:v-show指令
v-show指令:v-show="true/false" 控制元素显示/隐藏 1.使用 <!DOCTYPE html> <html> <head> ...
- Vue2学习笔记:v-for指令
1.使用 <!DOCTYPE html> <html> <head> <title></title> <meta charset=&q ...
- Vue2学习笔记:v-model指令
1.v-model指令 <!DOCTYPE html> <html> <head> <title></title> <script s ...
- vue2.0 之 directive指令 (自定义)
指令 一.定义: 指令只一种可以附加到DOM元素的微命令(tiny commands). 它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致 ...
- vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案
在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: 比如下面的代码,div.descBox里面的p标签的color样式并不是"color: blue" ...
- v:bind指令对于传boolean值的注意之处
1,
- Vue（1）
一:概述 Vue是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用.Vue的核心库只关心视图层,不仅易于上手,还便于与第三方库或既有项目 ...
- 第六十二篇：Vue的双向绑定与按键修饰符
好家伙,依旧是vue的基础 1.按键修饰符 假设我们在一个<input>框中输入了12345,我们希望按一下"Esc" 然后删除所有前面输入的内容,这时候,我们会用到按 ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_04-vuejs研究-vuejs基础-v-model指令
<!DOCTYPE html> <html lang="en" xmlns:v‐on="http://www.w3.org/1999/xhtml&quo ...
随机推荐
- [NOI2003][bzoj1507] 文本编辑器 editor [splay]
其实看明白了就是一道水题 毕竟模板 splay敲一发,插入一个串的时候先把它构建成一棵平衡树,再挂到原来的splay上面去即可 没别的了,上代码 #include<iostream> #i ...
- bzoj 4292: [PA2015]Równanie
Description 对于一个正整数n,定义f(n)为它十进制下每一位数字的平方的和.现在给定三个正整数k,a,b,请求出满足a<=n<=b且k*f(n)=n的n的个数. Input ...
- 游戏（game）
游戏(game) 题目描述 这个游戏是这样的,你有一个初始序列S ,你每次可以选择一段任意长度的连续区间,把他们+1 再膜k,给定目标序列,你需要尝试用尽量少的操作次数将初始序列变为目标序列.作为一名 ...
- 序列(seq)
序列(seq) 题目描述 给定 N,A,BN,A,B,构造一个长度为 NN 的排列,使得: 排列长度为 N: 最长上升子序列长度为 A: 最长下降子序列长度为 B. 我们有 SPJ,有解任意给出一组, ...
- Python之数据结构：字符串中的方法
一.过滤字符串 1.strip() (1)去掉行收尾不可见字符 a = ' wejifrow ' print a print a.strip() 结果: wejifrow wejifrow (2)st ...
- gradle ofbiz 16 开发环境搭建
原 gradle ofbiz 16 开发环境搭建 2017年02月13日 10:59:19 阅读数:2702 1.安装jdk 2.配置jdk环境变量 3.eclipse 安装svn 插件 4.svn下 ...
- 洛谷P1279 字串距离
题目描述 设有字符串X,我们称在X的头尾及中间插入任意多个空格后构成的新字符串为X的扩展串,如字符串X为”abcbcd”,则字符串“abcb□cd”,“□a□bcbcd□”和“abcb□cd□”都是X ...
- [CODEVS1130]数字反转
题目描述 Description 给定一个整数,请将该数各个位上数字反转得到一个新数.新数也应满足整数的常见形式,即除非给定的原数为零,否则反转后得到的新数的最高位数字不应为零. 这是一道水题.我必须 ...
- 比较全的.NET页面缓存技术文章
原文发布时间为:2009-11-04 -- 来源于本人的百度文章 [由搬家工具导入] http://www.cnblogs.com/jacksonwj/archive/2009/07/09/15197 ...
- 拖动层 拖动div 封装js 貌似不兼容FF,郁闷
原文发布时间为:2009-12-02 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...