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. 解决xcode ***is missing from working copy

    这是由于SVN置顶文件导致的,cd 至项目根目录 命令行 输入 find . -type d -name .svn | xargs rm -rf

  2. 1.Git 安装

    Git的安装 阿里云镜像去下载 阿里云的镜像地址 卸载Git 1.首先在系统环境变量->path->里面去清理掉git相关的环境变量 2.然后控制面板卸载 安装Git 一直下一步即可 使用 ...

  3. Pormetheus(一)

    (1)Prometheus由来普罗米修斯的灵感来自于谷歌的Borgmon.它最初是由马特·t·普劳德(Matt T. Proud)作为一个研究项目开发的,普劳德曾是谷歌(google)的一名雇员.在普 ...

  4. [译]谈谈SpringBoot 事件机制

    要"监听"事件,我们总是可以将"监听器"作为事件源中的另一个方法写入事件,但这将使事件源与监听器的逻辑紧密耦合. 对于实际事件,我们比直接方法调用更灵活.我们可 ...

  5. GNU的make命令、makefile编写

    makefile简介 makefile可实现工程的自动化编译,只需一个make命令即可一键完成.makefile定义了一些规则,指定哪些文件需要先编译.后编译.重新编译等. 一般的C或者C++程序,都 ...

  6. [V&N2020 公开赛]TimeTravel 复现

    大佬友链(狗头):https://www.cnblogs.com/p201821440039/ 参考博客: https://www.zhaoj.in/read-6407.html https://cj ...

  7. [YII2] 3步发送邮件，有图有真相!

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABOQAAAIcCAYAAABW0HFSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjw ...

  8. Python 中取代 Printf 大法的工具

    「printf 大法」大概是最早期学到的 debug 方式?不同语言有不同的指令,在 Python 里对应的是 print指令 (加上%或是.format). 刚刚看到「 cool-RR/pysnoo ...

  9. tensorflow1.0 变量加法

    import tensorflow as tf state = tf.Variable(0,name='counter') print(state.name) one = tf.constant(1) ...

  10. Exercise

    """ 问:执行完下面的代码后, l,m的内容分别是什么? """ def func(m): for k,v in m.items(): m ...