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. python3（二十二） oop

    """ 面向对象编程 """ __author__ = 'shaozhiqi' # 面向对象的程序设计把计算机程序视为一组对象的集合,而每个 ...

  2. 【python实现卷积神经网络】池化层实现

    代码来源:https://github.com/eriklindernoren/ML-From-Scratch 卷积神经网络中卷积层Conv2D(带stride.padding)的具体实现:https ...

  3. 08-less预处理器

    一.less预处理器 Less(LeanerStyle Sheets 的缩写)是一门 CSS扩展语言,也成为CSS预处理器. 1.插件安装 安装Easy LESS插件就能使写入的.less文件保存时自 ...

  4. B - Raising Modulo Numbers

    People are different. Some secretly read magazines full of interesting girls' pictures, others creat ...

  5. java中如何理解：其他类型 + string 与 自增类型转换和赋值类型转换

    java中如何理解:其他类型 + string 与 自增类型转换和赋值类型转换 一.字符串与其他类型连接 public class DemoString{ public static void mai ...

  6. 数据结构与算法--堆(heap)与栈(stack)的区别

    堆和栈的区别 在C.C++编程中,经常需要操作的内存可分为以下几个类别: 栈区(stack):由编译器自动分配和释放,存放函数的参数值,局部变量的值等,其操作方式类似于数据结构中的栈. 堆区(heap ...

  7. 13. 罗马数字转整数----LeetCode

    13. 罗马数字转整数 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 ...

  8. SpringBoot与单元测试JUnit的结合

    有些人认为,写单元测试就是在浪费时间 ,写完代码,依然还是能够进行测试的.但是,还是建议写单元测试的,可以让你的条理更加清晰,而且当某个功能出现问题时,可能通过单元测试很容易的定位和解决问题.本文主要 ...

  9. 排序1 - 选择排序 & 插入排序

    请原谅我没有按照之前图片的分类来介绍排序算法,先说最简单的两种排序算法(冒泡略过),选择排序和插入排序,之前老是容易记混.默认输出升序的序列啊,哈哈. 选择排序 对于输入长度为n的数组,一共比较n-1 ...

  10. 页面性能分析-Chrome Dev Tools

    一.分析面板介绍 进行页面性能快速分析的主要是图中圈出来的几个模块功能: Network : 页面中各种资源请求的情况,这里能看到资源的名称.状态.使用的协议(http1/http2/quic...) ...