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. Ubuntu 服务器443端口证书配置

    配置虚拟主机: cd /etc/apache2/sites-available 从默认的模板文件中复制过来一份进行自己的配置: sudo cp ./default-ssl.conf ./mysite1 ...

  2. 未能加载文件或程序集“System.Web.Mvc, Version=5.2.4.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项

    楼主创建项目的时候选择的是5.2.4的版本,但是后来改成了5.0.0于是出现了这个错误,解决的方法倒也简单 将View文件夹下 web.config文件中 以下两处 版本改成当前版本就行了

  3. 在xp下无人值守自动安装系统

    无人值守安装可以大大缩短安装系统的时间.我在虚拟机测试成功. 先给文件链接https://files.cnblogs.com/files/sishenzaixian/%E8%87%AA%E5%8A%A ...

  4. centos 7 进入图形界面

    1 确保自己已经安装图形界面,如果没有请执行命令 yum groupinstall "GNOME Desktop" "Graphical Administration T ...

  5. 求出100以内的素数（java实现）

    j package test1; //2018/11/30 //求100以内的所有素数 public class Main10 { public static void main(String[] a ...

  6. centos7 安装 pyspider 出现的一系列问题及解决方案集合

    先安装python3 和 pip3 wget https://www.python.org/ftp/python/3.6.5/Python-3.6.5.tgz 安装zlib-devel包(后面安装pi ...

  7. day11（函数参数，函数对象，打散机制，函数嵌套调用）

    一,复习 # 什么是函数:具体特定功能的代码块 - 特定功能代码块作为一个整体,并给该整体命名,就是函数 # 函数的优点: # 1.减少代码的冗余 # 2.结构清晰,可读性强 # 3.具有复用性,开发 ...

  8. Springboot的static和templates区别

    static和templates部分参考博客:https://blog.csdn.net/wangb_java/article/details/71775637 热部署参考博客:https://www ...

  9. Vuex 存储||获取后台接口数据

    如果你对 Vuex 有一定的了解的话呢,可以继续这一篇的学习了,如果没有的话, 建议先看一看我的上一篇 Vuex基础:地址在下面 Vuex的详解与使用 Vuex刷新数据不丢失 这篇接着上一篇: 这篇将 ...

  10. Vue.js 2.x笔记：基本语法（2）

    1. Vue实例及选项 1.1 创建Vue实例(new Vue instance) 每个Vue Application必须创建一个root Vue Instance. <script> v ...