v-model简介和适用范围

Vue的一大特点之一就是数据的双向绑定,v-model就是实现这个功能的指令,v-model只能运用到表单元素中,例如

input,radio,text,address,email,select,checkbox,textarea....

表单元素才能去双向交互,至于div和p啥的,洗洗睡吧

新建HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蜀云泉</title> <script type="text/javascript" src="../lib/vue-2.6.10.js"></script> </head>
<body> <!-- 这个div就是MVVM中的V,View -->
<div id="app"> <h3 v-text="msg"></h3> <input type="text" style="width:100%" v-model="msg"> </div> <script>
// 这个vm就是MVVM中的VM,ViewModel
var vm=new Vue({
el: '#app',
// 这个data就是MVVM中的M,Model
data: {
msg:"大家好,我是Vae"
},
methods: {
} }) </script> </body>
</html>

所见即所得

运行,修改input的内容,你会发现上面的文字也跟着变动了,有点所见即所得的感觉

v-model模拟简易计算器

HTML代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蜀云泉</title> <script type="text/javascript" src="../lib/vue-2.6.10.js"></script> </head>
<body> <!-- 这个div就是MVVM中的V,View -->
<div id="app"> <h3 v-text="msg"></h3> <input type="text" style="width:100%" v-model="msg"> <!-- v-model模拟简易计算器 -->
<input type="text" v-model="num1"> <select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select> <input type="text" v-model="num2"> <input type="button" value="=" @click="calc"> <input type="text" v-model="result"> </div> <script>
// 这个vm就是MVVM中的VM,ViewModel
var vm=new Vue({
el: '#app',
// 这个data就是MVVM中的M,Model
data: {
msg:"大家好,我是Vae",
num1:0,
num2:0,
result:0,
opt:'+'
},
methods: {
calc(){
switch(this.opt){
case '+':
this.result=parseInt(this.num1)+parseInt(this.num2);
break;
case '-':
this.result=parseInt(this.num1)-parseInt(this.num2);
break;
case '*':
this.result=parseInt(this.num1)*parseInt(this.num2);
break;
case '/':
if(this.num2==0) {alert('除数不能为0');break;}
this.result=parseInt(this.num1)/parseInt(this.num2);
break; }
}
} }) </script> </body>
</html>

效果图:

防盗链接:本博客由蜀云泉发表

Vue学习笔记六:v-model 数据双向绑定的更多相关文章

  1. MVVMLight学习笔记(三)---数据双向绑定

    一.概述 本文与其说是MVVMLight框架的学习,不如说是温故一下数据的双向绑定. 二.Demo 建立好MVVMLight框架后的Wpf工程后,建立一个Model.Model.View以及ViewM ...

  2. AngularJS学习笔记(三)数据双向绑定

    双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 下面,我们通过代码来实现.先不要纠 ...

  3. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  4. AngularJS学习笔记(一) 关于MVVM和双向绑定

    写在前面: 因为需要开始学习ng,之前在知乎上听大神们介绍ng的时候说这个坑如何的大,学了一阵(其实也就三天),感觉ng做的很大很全,在合适的情境你可以完全使用ng搞定一切.这一点从诸如jqLite之 ...

  5. SQL学习笔记六之MySQL数据备份和pymysql模块

    mysql六:数据备份.pymysql模块   阅读目录 一 IDE工具介绍 二 MySQL数据备份 三 pymysql模块 一 IDE工具介绍 生产环境还是推荐使用mysql命令行,但为了方便我们测 ...

  6. vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子,儿子更改数据后,重新发送给父亲,父亲数据更改后,属性会重新发送个儿子,儿子刷新新数据

    vue组件是相互独立的,如果要交互通讯,这时候,就需要组件之间数据互通了 往常我们讲的都是数据传递,子传父,父传子,都没有说子和父,父与子之间的数据互通 父亲传递给儿子数据,儿子触发一个父亲方法,将最 ...

  7. Vue.js线程机制问题还是数据双向绑定有延迟的问题

    最近用select2做一个下拉多选,若只是从后端获取一个列表渲染还好说,没有任何问题.但要用select2对数据初始化时进行selected的默认选项进行显示,就出现问题了. vm.$set('are ...

  8. vue 利用v-model实现父子组件数据双向绑定

    v-model父组件写法: v-model子组件写法: 子组件export default中的model:{}里面两个值,prop代表着我要和props的那个变量相对应,event表示着事件,我触发事 ...

  9. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

随机推荐

  1. Python:当你遇到了the package “public”?

    前几天跑github上的一个python项目,先都是看看需要哪些模块哪些包,安装配置好环境的.可是看到 import public我眉头一皱,觉得事情并不简单! 所以准备扒一扒!当然项目需要也是真的哈 ...

  2. TCP点对点转发的实现与原理(nodejs)

    Nagent Nagent是TCP点对点转发实现,名称来源于Nat与Agent的组合.类似frp项目,可以在局域网与互联网提供桥梁. 前提是你要有一台流量服务器并且有一个公网IP.如果没有,也可以找服 ...

  3. Java:配置环境(Mac)——Tomcat

    1.官网下载 2.把下载的文档解压,放到合适的路径下. 3.打开eclipse 4.在Apache文件夹下选择Tomcat的对应版本 5.选择刚才下载的文件 6.可以右键Start了

  4. .Net Core 在Linux服务器下部署程序--(3). 部署.net Core程序

    确认第二步中的软件已安装完成 lrzsz文件上传下载软件 zip与unzip压缩包软件 net core 相关软件 确认上述软件安装完成之后,开始部署程序 创建部署文件夹 我的习惯是在usr文件夹下新 ...

  5. LeetCode算法题-Largest Number At Least Twice of Others(Java实现)

    这是悦乐书的第308次更新,第328篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第177题(顺位题号是747).在给定的整数数组中,总有一个最大的元素.查找数组中的最大 ...

  6. XMind 8 Pro 破解

    1.补丁下载地址 链接:https://pan.baidu.com/s/146qcwkvOGCAneIXabSZSUA    提取码:wygs 2.安装 XMind 8 Pro, 运行 3. 去除检查 ...

  7. Qt class

    Help on class Qt in module PyQt5.QtCore: class Qt(sip.simplewrapper) |  Method resolution order: |   ...

  8. JS 设计模式四 -- 模块模式

    概念 模块模式的思路 就是 就是单例模式添加私有属性和私有方法,减少全局变量的使用. 简单的代码结构: var singleMode = (function(){ // 创建私有变量 var priv ...

  9. MySQL二进预编译制安装

    +++++++++++++++++++++++++++++++++++++++++++标题:MySQL二进预编译制安装时间:2019年2月25日内容:MySQL二进制预编译安装重点:MySQL二进制预 ...

  10. 初识Haskell 五:自定义数据类型和类型类

    对Discrete Mathematics Using a Computer的第一章Introduction to Haskell进行总结.环境Windows 自定义数据类型 data type de ...