Vue指令之v-model和双向数据绑定

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <h4>{{msg}}</h4>

            <!-- 使用  v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 -->

            <!-- 注意： v-model 只能运用在 表单元素中

            input(radio, text, address, email....)   select

              checkbox   textarea   -->

            <input type="text" v-model="msg" />

            <!-- v-bind只能单向给属性绑定变量,Mode层绑定View层 -->

            <input type="text" v-bind:value="msg" />

        </div>

        <script type="text/javascript">

            new Vue({

                el:"#app",

                data:{

                    msg:"数据双向绑定！"

                }

            })

        </script>

    </body>

</html>

使用v-mode写的一个计算器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <input type="text" v-model="n1">

            <select v-model="opt">

              <option value="+">+</option>

              <option value="-">-</option>

              <option value="*">*</option>

              <option value="/">/</option>

            </select>

            <input type="text" v-model="n2">

            <input type="button" value="=" @click="calc">

            <input type="text" v-model="result">

          </div>

          <script>

            // 创建 Vue 实例，得到 ViewModel

            var vm = new Vue({

              el: '#app',

              data: {

                n1: 0,

                n2: 0,

                result: 0,

                opt: '+'

              },

              methods: {

                calc() { // 计算器算数的方法

                  // 逻辑：

                   switch (this.opt) {

                    case '+':

                      this.result = parseInt(this.n1) + parseInt(this.n2)

                      break;

                    case '-':

                      this.result = parseInt(this.n1) - parseInt(this.n2)

                      break;

                    case '*':

                      this.result = parseInt(this.n1) * parseInt(this.n2)

                      break;

                    case '/':

                      this.result = parseInt(this.n1) / parseInt(this.n2)

                      break;

                  } 

                }

              }

            });

          </script>

    </body>

</html>

学习Vue第四节，v-model和双向数据绑定的更多相关文章

  1. 学习HTML 第四节.插入图像

    学习HTML 第四节.插入图像 全是文字的网页太枯燥了吧,我们来搞个图片上去! <!DOCTYPE html><html><head><meta charse ...

  2. 风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击

    风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...

  3. Vue: 一个简单的Vue2.0 v-model双向数据绑定的实现，含源代码，小白也能看懂

    首先说一下原理吧 View层(dom元素)的变动如何响应到Model层(Js变量)呢? 通过监听元素的input事件来动态的改变js变量的值,实际上不是改变的js变量的值,而是改变的js变量的gett ...

  4. Vue快速学习_第四节

    获取原生的DOM方式($.refs) 给标签或者组件 添加ref <div ref = 'liu'>test</div> <Home ref = 'home'>&l ...

  5. [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38331347 本文作者:sushengmiyan ------------------ ...

  6. HTML学习----------DAY2第四节

    HTML 文档是由 HTML 元素定义的. HTML 元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 注释:开始标签常被称为开放标签(opening ...

  7. 学习vue第七节，filter过滤器如何的使用

    vue 过滤器如何的使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. 学习vue第六节，v-if和v-show

    vue 中的v-if和v-show <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. 学习vue第五节，vue中使用class和style的css样式

    vue中使用class样式 数组 <h1 :class="['red', 'thin']">这是一个H1</h1> 数组中使用三元表达式 <h1 :c ...

随机推荐

  1. Linux下删除大量文件效率对比

    来自公众号:马哥Linux运维 今天我们来测试一下Linux下面删除大量文件的效率. 首先建立50万个文件 $ test   for i in $(seq 1 500000);do echo text ...

  2. docker-compose 基于Dockerfile 安装并启动redis容器的血案

    前言 为了实现"一键部署"的目的,我采用Dockerfile 和 docker-compose来实现自己的目的.这个过程中,我怎么也无法启动自己的redis-server服务. 目 ...

  3. 360众测考试，weblogic题（CVE-2018-2894）文件上传漏洞

    0x01 漏洞简介 Weblogic管理端未授权的两个页面存在任意上传jsp文件漏洞,进而获取服务器权限. Oracle 7月更新中,修复了Weblogic Web Service Test Page ...

  4. vue的组件缓存（返回页面不刷新）

    每次使用返回是页面总是会刷新 导致了一些体验上的不愉快 现在 发现vue中的一个很方便的方法还可以用来优化性能就是: keep-alive缓存组件 <router-view v-if=" ...

  5. 【Java】手动编写第一个Java程序，HelloWorld!

    第一个Java程序HelloWorld! 环境前提:确保你已经配置好了JDK8的环境变量,和本体安装 打开文本编辑器,这里我使用的是EditPlus 编写代码: public class Hello{ ...

  6. Hugo博客搭建

    HUGO + Github + Github Action持续集成部署个人博客 HUGO本地环境 首先在HUGO的官网下载Hugo的Windows安装包,然后将路径添加到环境变量即可. step1:下 ...

  7. 详解 Set接口

    (请关注 本人"集合"总集篇博文--<详解 Collection接口>) 在Collection接口的子接口中,最重要的,也是最常见的两个-- List接口 和 Set ...

  8. testNG 断言

    testNG提供一个Assert类,来判断输出值是否与预期值一致,Assert常用的方法有: Assert.assertEquals():此方法可以有两个参数值,也可以有3个参数值,参数的顺序是 ac ...

  9. 尝试用python开发一款图片压缩工具1：尝试 pillow库

    开发目的 我经常使用图片.公众号文章发文也好,还是生活中要使用素材.图片是一种比文字更加直观的载体.但是图片更加占用带宽,很多软件都对图片有大小限制.图片太大也会影响加载速度.我试过几款图片压缩工具, ...

  10. redis的多路复用是什么鬼

    有没有人和我一样, 自打知道了redis, 就一直听说什么redis单线程, 使用了多路复用等等. 天真的我以为多路复用是redis实现的技术. 今天才发现, 我被自己骗了, 多路复用是系统来实现的. ...