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 ...
随机推荐
- TOJ 4105 Lines Counting（离线树状数组）
4105. Lines Counting Time Limit: 2.0 Seconds Memory Limit: 150000K Total Runs: 152 Accepted Ru ...
- [NOI2008][bzoj1061] 志愿者招募 [费用流+巧妙的建图]
题面 传送门 思路 引入:网络流? 看到这道题,第一想法是用一个dp来完成决策 但是,显然这道题的数据并不允许我们进行dp,尤其是有10000种志愿者的情况下 那么我们就要想别的办法来解决: 贪心?这 ...
- php中的对象赋值
如果现在问你一个问题: <?php class A{ public $a = 1; } $a = new A(); $b = $a; $b->a = 3; print_r($a->a ...
- python（3）-- 语句：条件、循环、break、continue...
1. 条件语句 执行条件:判断条件"成立时(非零),则执行后面的语句,而执行内容可以多行,以缩进来区分表示同一范围. [Python程序语言指定任何非0和非空(null)值为true,0 或 ...
- ios 上传视频或图片
关于iOS如何实现视频和图片的上传, 我们先理清下思路 思路: #1. 如何获取图片? #2. 如何获取视频? #3. 如何把图片存到缓存路径中? #4. 如何把视频存到缓存路径中? #5. 如何上传 ...
- pat 甲级 1022. Digital Library (30)
1022. Digital Library (30) 时间限制 1000 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A Di ...
- [LeetCode] Factorial Trailing Zeroes 阶乘末尾0
Given an integer n, return the number of trailing zeroes in n!. Note: Your solution should be in log ...
- PHP操作MongoDB（增删改查）
MongoDB的PHP驱动提供了一些核心类来操作MongoDB,总的来说MongoDB命令行中有的功能,它都可以实现,而且参数的格式基本相似.PHP7以前的版本和PHP7之后的版本对MongoDB的操 ...
- 【转载】NonEmpty和Non Empty的区别
转载来源:http://www.ssas-info.com/analysis-services-articles/50-mdx/2196-mdx-non-empty-vs-nonempty One o ...
- AC日记——[SCOI2007]蜥蜴 bzoj 1066
1066 思路: 网络流最大流: 拆点,每个点拆成两个,流量为这个点的高度: 注意,文中说的距离是曼哈顿距离(劳资以为开根号wa了不知道多少次): 每两个距离不大于d的点连边,流量inf: 如果距离能 ...