学习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 ...
随机推荐
- 六、路由详细介绍之动态路由RIP（了解一下就行）
动态路由分为距离矢量路由(RIP)和链路状态(OSPF和ISIS) 一.离矢量路由协议-RIP RIP协议现在基本上被淘汰. RIP动态路由协议工作原理,如上图: R12中有192.168.1.0和1 ...
- 对称加密算法在C#中的踩坑日常
前言 有幸接触了一下传说中的对称加密算法3DES 感觉这些加密算法与我的工作是想去甚远的,一般没什么机会接触这些东西 今次了解了一下3DES这个对称算法 原理算不上明白,算是踩了C#中的一些坑吧 C# ...
- tf.get_variable
使用tf.get_variable()时,如果检测到命名冲突,系统不会处理冲突,而会报错. 如果已经创建的变量对象,就把那个对象返回,如果没有创建变量对象的话,就创建一个新的. tf.get_vari ...
- IDEA我常用的快捷键
IDEA快捷键 全屏编写代码:Ctrl+Shift+F12
- 从前端到后端实现弹幕的过程（jsp/Jquery.barrager.js）
Jquery.barrager.js插件,可以去网上下载!下载完后,就把下载文件中的js文件.css文件.图片文件.等等等文件全部拷贝到你们自己的项目中去,千万别拷贝漏了,如果你怕拷贝漏了什么,那就把 ...
- k3s-初体验
k3s安装步骤 1.准备工作 关闭swap交换分区 swapoff -a 关闭防火墙 systemctl stop firewalld.service 2.下载启动k3s包 https://githu ...
- 用Python做一个知乎沙雕问题总结
用Python做一个知乎沙雕问题总结 松鼠爱吃饼干2020-04-01 13:40 前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以 ...
- 移动硬盘临时文件太多怎么办，python黑科技帮你解决
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 星安果 PS:如果想了解更多关于python的应用,可以私信我,或者 ...
- I. Same String
有两个只由小写字母组成的长度为n的字符串s1,s2和m组字母对应关系,每一组关系由两个字母c1和c2组成,代表c1可以直接变成c2,你需要判断s1是否可以通过这m组关系转换为s2. 输入格式 第一行输 ...
- 关于C++线程池的实现的思考
今天突然对前些日子一直很疑惑的c++线程池有了新的想法.其实所谓的线程池无非就是两个技术点,一个,多线程,指工作线程和主线程分离,或者说数据接收和处理分两个线程,一般就是讲需要运行的函数放到子线程执行 ...