<!-- v-model 实现数据的双向绑定 -->
<!-- v-model 只能用在表单元素中 -->
示例：
<!DOCTYPE html>

<!-- v-model 实现数据的双向绑定 -->

<!-- v-model 只能用在表单元素中 -->

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <h4>{{ msg1 }}</h4>

        <!-- v-bind 只能实现数据的单项绑定 -->

        <!-- : 冒号，是 v-bind的简写方式 -->

        <input type="text" :value="msg1" style="width: 100%">

        <h4>{{ msg2 }}</h4>

        <!-- 双向绑定 -->

        <input type="text" v-model="msg2" style="width: 100%">

    </div>

</body>

<script>

    let vm = new Vue({

        // 绑定对象

        el: '#app',

        data: {

            msg1: '数据单项绑定，不变',

            msg2: '数据双向绑定，变化'

        },

        methods: {

        }

    })

</script>

</html>

Vue.js02：数据绑定v-model用法的更多相关文章

  1. Vue双向数据绑定原理分析（转）

    add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...

  2. vue双向数据绑定最最最最最简单直观的例子

    vue双向数据绑定最最最最最简单直观的例子 一.总结 一句话总结:双向绑定既不仅model可以影响view的数据,view也可以影响model的数据 view model 数据 1.vue双向数据绑定 ...

  3. vue 双向数据绑定的实现学习（一）

    前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...

  4. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  5. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  6. Android进阶笔记13：RoboBinding（实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架）

    1.RoboBinding RoboBinding是一个实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架.从简单的角度看,他移除了如addXXListen ...

  7. vue 双向数据绑定的实现学习（二）- 监听器的实现

    废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和  ...

  8. vue双向数据绑定的简单实现

    vue双向数据绑定的简单实现 参考教程:链接 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  9. 详解Vue中watch的高级用法

    我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...

  10. angular和vue双向数据绑定

    angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...

随机推荐

  1. 关于uni-app框架的学习-1

    根据官方文档进行学习Uni-APP, 再次过程中,记录一些需要熟悉的内容,有不合适的地方,见着都可知道,----我是一个小白,小白,小白 官网地址:https://uniapp.dcloud.io/ ...

  2. 对 Undefined 与 Null 的一些理解

    Undefined 和 Null 是 Javascript 中两种特殊的原始数据类型(Primary Type),它们都只有一个值,分别对应 undefined 和 null ,这两种不同类型的值,既 ...

  3. Scala的类层级讲解

    Scala的类层级 Scala里,每个类都继承自通用的名为Any的超类. 因为所有的类都是Any的子类,所以定义在Any中的方法就是"共同的"方法:它们可以被任何对象调用. Sca ...

  4. Uber是如何重新思考GPS定位的（尤其是在城市峡谷中）

    郑昀(公众号:老兵笔记) 20180424 2018年4月19日,Uber 公布了 GPS 优化算法,https://eng.uber.com/rethinking-gps/,针对GPS定位在城市环境 ...

  5. #Java学习之路——基础阶段二（第八篇）

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  6. Java实现点击导出excel页面遮罩屏蔽，下载完成后解除遮罩

    一.问题场景 最近在做数据统计功能,需求是导出大数据量的excel,时间间隔较长,大概需要十秒左右,点击导出后,页面没有做任何处理,用户也不知道是否正在导出:如果没有做交互上的限制,用户可以一直点击导 ...

  7. 辅助模式最终考验的是想象力，先来看看怎么用！| Accessibility

    一.序 Hi,大家好,我是承香墨影! Android 的辅助模式(Accessibility)功能非常的强大.基本上被获取到授权之后,可以监听手机上的任何事件,例如:屏幕点击.窗口的变化.以及模拟点击 ...

  8. 『练手』001 Laura.SqlForever架构基础（Laura.XtraFramework 的变迁）

    001 Laura.SqlForever架构的基础(Laura.XtraFramework 的变迁之路) Laura.XtraFramework 到底是 做什么的? Laura.XtraFramewo ...

  9. 在Xunit中使用FsCheck

    目录 编写基于Property-based的单元测试 使用FsCheck编写Property-based测试 在Xunit中使用FsCheck 使用FsCheck编写Model-based测试-待续 ...

  10. 04-创建kubeconfig认证文件

    本文档记录自己的学习历程! 创建 kubeconfig 文件 kubelet.kube-proxy 等 Node 机器上的进程与 Master 机器的 kube-apiserver 进程通信时需要认证 ...