学习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 ...
随机推荐
- 小程序后台隐藏后 socket 无法重新连接
小程序后台隐藏后 socket 无法重新连接 连接时 fail 回调函数的事件参数:connectSocket:fail:jsapi has no permission,event=createSoc ...
- 微信小程序页面通信
目录 微信小程序页面通信 方式一:通过URL 方式二:通过全局变量 方式三:通过本地存储 方式四:通过路由栈 微信小程序页面通信 方式一:通过URL // A 页面 wx.navigateTo({ u ...
- 虚拟机VMware 安装后虚拟机网卡与主机网卡数据交换关系
安装好虚拟机以后,在网络连接里面可以看到多了两块网卡: 其中VMnet1是虚拟机Host-only模式的网络接口,VMnet8是NAT模式的网络接口,这些后面会详细介绍.在VMware Worksta ...
- VXLAN 基础教程：在 Linux 上配置 VXLAN 网络
上篇文章结尾提到 Linux 是支持 VXLAN 的,我们可以使用 Linux 搭建基于 VXLAN 的 overlay 网络,以此来加深对 VXLAN 的理解,毕竟光说不练假把式. 1. 点对点的 ...
- Largest Rectangle in a Histogram 杭电1506
题目链接 :http://acm.hdu.edu.cn/showproblem.php?pid=1506 Problem Description A histogram is a polygon co ...
- redis： 配置文件详解（十一）
#通用配置 bind 127.0.0.1 #绑定可访问的ip 默认本机访问,如果bind选项为空的话,那会接受所有来自于可用网络接口的连接,也可以绑定指定ip访问 protected-mode yes ...
- 从零开始学习docker之在docker中搭建redis(单机)
docker搭建redis 一.环境准备 云环境:CentOS 7.6 64位 二.下载镜像 从docker hub中找到redis镜像 传送门------https://hub.docker.com ...
- php 推荐密码加密的方法
password_hash() 函数 password_hash() 函数用于创建密码的散列(hash) PASSWORD_DEFAULT - 使用 bcrypt 算法 (PHP 5.5.0 默认). ...
- 深入理解PHP之数组(遍历顺序)
作者: Laruence 本文地址: http://www.laruence.com/2009/08/23/1065.html 转载请注明出处 经常会有人问我, PHP的数组, 如果用foreach来 ...
- awk,seq,xarg实例使用
基于https://www.cnblogs.com/wangyuebo/p/5836933.html的详细补充讲解 [root@localhost awk]# seq 10|xargs -n 2 &g ...