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. 团队项目（六）- Alpha阶段项目复审（江山代有才人秃）

    排名仅代表个人观点: 小组名字 优点 缺点&Bug报告 排名 中午吃啥队 从测试链接来看,作为一个订餐的APP,有着跟现在的订餐APP相似的功能,很完整,是一个踏踏实实做出来的项目 向购物车中 ...

  2. rabbitmq之基本原理及搭建单机环境

    1.RabbitMQ基本原理 1.MQ全称Message Queue,是一种分布式应用程序的通信方法,是消费-生产者模型的典型代表,producer向消息队列中不断写入消息,而另一端consumer则 ...

  3. mssql sqlserver 将字段null(空值)值替换为指定值的三种方法分享

    摘要: 下文将分享两种将字段中null值替换为指定值的方法分享,如下所示: 实验环境:sqlserver 2008 R2 例: )) go insert into test(info)values(' ...

  4. 获取用户IP

    public static string GetIP()        {            string ip;            if (System.Web.HttpContext.Cu ...

  5. win7系统搭建FTP服务器

    工作需要,所以研究了一下. 1. 打开: 控制面板 -> 卸载程序 -> (左侧)打开或关闭windows功能 等个一小会,勾选如下图红色方框内的选项. 2. 开始 -> 搜索: I ...

  6. windows 10隐藏各种文件夹

    1.windows键+R打开运行,或者Ctrl+Alt+Del键调出任务管理器--文件--运行新的任务,然后出入"regedit"打开注册表: 2.按目录找到:[-HKEY_CLA ...

  7. nginx学习路线

    nginx:熟透,配置.rewrite.黑白名单.脚本.代理.优化等

  8. MySQL慢查询&执行计划

    参考文章: https://blog.csdn.net/tiantianw/article/details/53334566 http://www.cnblogs.com/luyucheng/p/62 ...

  9. C语言函数的格式

    #include <stdio.h>#include <stdlib.h>extern int addf(int a,int b);//函数能多次声明//int addf(in ...

  10. mysql 新建用户并赋予远程访问权限

    不多说直接上代码 [root@demo /]# mysql -u root -p #登录服务器数据库 Enter password:123xxx #1.创建一个新用户 testuser 密码为 tes ...