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. 浅谈Flutter（一）：搭建Flutter开发环境

    学习内容来自: Flutter中文网  . Flutter实战 -------------------------------------------------------------------- ...

  2. Redis笔记-集群搭建

    Redis单机版搭建上一篇已经基本介绍了,下面讨论Redis集群搭建方案和示例. 1.关于Redis常用的集群方案(三种): a.一主多从,如一个Master.两个Slave b.薪火相传,即集群中的 ...

  3. SQLServer删除登录帐户

    删除登陆账户注意事项 不能删除正在登录的登录名. 也不能删除拥有任何安全对象.服务器级对象或 SQL Server 代理作业的登录名. 可以删除数据库用户映射到的登录名,但是这会创建孤立用户. 有关详 ...

  4. arts打卡 从排序数组中删除重复项

    Algorithm 从排序数组中删除重复项     给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组 ...

  5. WinForms 快速开发的工具类。

    下面是我本人在 WinForms 开发中积累的一些心得. 1. 在父窗体中打开子窗体 直接贴代码: private void btnCompare_Click(object sender, Event ...

  6. Reason的介绍和搭建Reason开发环境

    Reason介绍 Reason是在Ocaml语言的基础上修改而来,专门提供给前端开发者使用. Reason是函数式编程语言,使用Bucklescript编译器编译成javascript语言. 在我看来 ...

  7. 周末学习笔记——day02（带参装饰器，wraps修改文档注释，三元表达式，列表字典推导式，迭代器，生成器，枚举对象，递归）

    一,复习 ''' 1.函数的参数:实参与形参 形参:定义函数()中出现的参数 实参:调用函数()中出现的参数 形参拿到实参的值,如果整体赋值(自己改变存放值的地址),实参不会改变,(可变类型)如果修改 ...

  8. 前端开发 JavaScript 规范文档

    一,规范目的 为提高团队协作效率,便于前端后期优化维护,输出高质量的文档. 二.基本准则 符合web标准,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序, 尽可能的减小服务器负载,保 ...

  9. Windows rundll32的用法-批处理管理打印机

    用法: rundll32 printui.dll,PrintUIEntry [options] [@commandfile] /a[file] 二进制文件名 /b[name] 基本打印机名 /c[na ...

  10. JAVA如何利用Swiger获取Linux系统电脑配置相关信息

    最近开发java应用程序,涉及到获取Linux服务器相关配置的问题,特地网上搜寻了下,采用Swiger包可以直接获取,再次小结一下,以便于以后能方便使用,也便于其他童鞋们学习. 推荐大家参考链接:ht ...