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. Android Interpolator解析

    本文部分图片转自:https://blog.csdn.net/lgaojiantong/article/details/39451243 目录 自定义插值器 系统插值器 1. 自定义插值器 要自定义插 ...

  2. 盖洛普Q12在团队中的应用

    周五给大家做了个盖洛普Q12的分享.   分享前做了调查问卷.除了盖洛普Q12的12个问题: 1．我知道公司对我的工作要求吗? 2．我有做好我的工作所需要的材料和设备吗? 3．在工作中,我每天都有机会 ...

  3. PostgreSQL For Windows 全功能精简版

    预览 精简部分 保留全部 PostgreSQL 相关功能 删除自带的 pgadmin 4 删除文档 删除开发用头文件 删除开发用静态连接库 删除 Stack Build 工具 写了一个管理数据库用的批 ...

  4. Video clip 视频剪辑：入门级

    作为一个对小说漫画电视剧电影的设计有着自己独特需求的人,一直对视频剪辑有着浓厚的兴趣,之前用爱剪辑这种通俗易上手的软件做过简单的小视频.但是这个毕竟满足不了我自己的需求而且属于完全门外汉级别.这次终于 ...

  5. 数据库MySQL和Redis实践

    1.关于数据库设计的那些事 2.MySQL 3.Redis

  6. Mysql原理与优化

    原文:https://mp.weixin.qq.com/s__biz=MzI4NTA1MDEwNg==&mid=2650763421&idx=1&sn=2515421f09c1 ...

  7. 基于H5的摄像头视频数据流采集

    最近,为了支持部门团队的项目,通过H5实现摄像头的视频流数据的捕获,抓取到视频流后,传输到视频识别服务器进行后续的逻辑处理. 视频数据的采集过程,其实是比较没有谱的过程,因为之前没有研究过HTML5操 ...

  8. Mysql基本命令及数据库存储位置

    连接数据库: sudo mysql -p+密码 例如:sudo mysql -p123456 1.显示数据库列表. show databases; 2.显示库中的数据表: use mysql: //打 ...

  9. codeforces#1152C. Neko does Maths（最小公倍数）

    题目链接: http://codeforces.com/contest/1152/problem/C 题意: 给出两个数$a$和$b$ 找一个$k(k\geq 0)$得到最小的$LCM(a+k,b+k ...

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

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