学习Vue第四节，v-model和双向数据绑定
Vue指令之v-model和双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h4>{{msg}}</h4>
<!-- 使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 -->
<!-- 注意： v-model 只能运用在 表单元素中
input(radio, text, address, email....) select
checkbox textarea -->
<input type="text" v-model="msg" />
<!-- v-bind只能单向给属性绑定变量,Mode层绑定View层 -->
<input type="text" v-bind:value="msg" />
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"数据双向绑定！"
}
})
</script> </body>
</html>
使用v-mode写的一个计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1"> <select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select> <input type="text" v-model="n2"> <input type="button" value="=" @click="calc"> <input type="text" v-model="result">
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc() { // 计算器算数的方法
// 逻辑：
switch (this.opt) {
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2)
break;
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2)
break;
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2)
break;
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2)
break;
} }
}
});
</script>
</body>
</html>
学习Vue第四节，v-model和双向数据绑定的更多相关文章
- 学习HTML 第四节.插入图像
学习HTML 第四节.插入图像 全是文字的网页太枯燥了吧,我们来搞个图片上去! <!DOCTYPE html><html><head><meta charse ...
- 风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击
风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...
- Vue: 一个简单的Vue2.0 v-model双向数据绑定的实现，含源代码，小白也能看懂
首先说一下原理吧 View层(dom元素)的变动如何响应到Model层(Js变量)呢? 通过监听元素的input事件来动态的改变js变量的值,实际上不是改变的js变量的值,而是改变的js变量的gett ...
- Vue快速学习_第四节
获取原生的DOM方式($.refs) 给标签或者组件 添加ref <div ref = 'liu'>test</div> <Home ref = 'home'>&l ...
- [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38331347 本文作者:sushengmiyan ------------------ ...
- HTML学习----------DAY2第四节
HTML 文档是由 HTML 元素定义的. HTML 元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 注释:开始标签常被称为开放标签(opening ...
- 学习vue第七节，filter过滤器如何的使用
vue 过滤器如何的使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 学习vue第六节，v-if和v-show
vue 中的v-if和v-show <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 学习vue第五节，vue中使用class和style的css样式
vue中使用class样式 数组 <h1 :class="['red', 'thin']">这是一个H1</h1> 数组中使用三元表达式 <h1 :c ...
随机推荐
- shell命令-while语句
loop=1 while [ "$loop" -le 10 ] do echo "loop:$loop" loop=$(($loop+2)) done
- 不错的spring学习博客
http://blog.csdn.net/xyh820/article/details/7303330/
- Tcxgrid使用例子
1.更改某个单元格的值后,其他单元格的值也相应改变 直接点击单元格进行更改值,然后在改单元格增加相应的事件: procedure Tfrm_BarCode_makecl5.gdtv_1select_t ...
- 01、WireShark——ARP 协议包分析
1. 什么是ARP ARP(Address Resolution Protocol)协议,即地址解析协议.该协议的功能就是将 IP 地 址解析成 MAC 地址. ARP(Address Resolu ...
- php+mysql数据库联合查询 left join 右侧数据重复问题
情况:多表联合查询(三表及以上联合查询) 分析: A left join B left join C left join D 假如: 表B.C.D都与表A关联查询 A left join B 4条数据 ...
- [YII2] 去除自带js，加载自己的JS，然后ajax（json）传值接值！
本想用YII2自带的JS,可是用着效果不好,想从新加载,找了好多终于实现啦!还有ajax(json)传值接值! 首先直接了当的就把YII2自带的js去掉! 把下面代码加入到/config/main.p ...
- 形象地展示信号与系统中的一些细节和原理——卷积、复数、傅里叶变换、拉普拉斯变换、零极图唯一确定因果LTI系统
看懂本文需要读者具备一定的微积分基础.至少开始学信号与系统了本文主要讲解欧拉公式.傅里叶变换的频率轴的负半轴的意义.傅里叶变换的缺陷.为什么因果LTI系统可以被零极图几乎唯一确定等等容易被初学者忽略但 ...
- 0day学习笔记(3)Windows定位API引起的惨案(原理)
段选择器FS与TEB WinNT内核下内存采用保护模式,段寄存器的意义与实模式汇编下的意义不同．另外,FS存的是段选择子,而不是实模式下的高16位基地址. FS寄存器指向当前活动线程的TEB结构(线程 ...
- linux下批量删除文件
1. 在linux批量删除多级目录下同一格式的文件,可采用find + exec命令组合: 如在删除old目录下的,所有子目录中,后缀为.l的文件方法为: find old -type f -name ...
- （二）PL/SQL特殊符号
PL/SQL标识符 PL/SQL标识符是常量,变量,异常,过程,游标和保留字.标识符是由一个字母后面可以跟更多的字母,数字,美元符号,下划线和数字符号,并且不得超过30个字符. 默认情况下,标识符不区 ...