<!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

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

     <title>Document</title>

     <!--1.导入Vue的包-->

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

   </head>

   <body>

     <div id="app">

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

         <!-- v-bind只能实现数据的单向绑定，从M 自动绑定到 V，无法实现数据的双向绑定 -->

         <!-- <input type="text" v-bind:value="msg" style="width: 100%"> -->

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

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

         <!-- 常见的表单元素： input(radio,text,address,email......)  select  checkbox  textarea -->

         <input type="text" value="msg" style="width: 100%;" v-model="msg">

     </div>

     <script>

        // 创建 Vue 实例，得到 ViewModel

       var vm =  new Vue({

         el:'#app',

         data:{

           msg:'大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'

         },

         methods:{}

       });

     </script>

   </body>

 </html>

第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定的更多相关文章

  1. 第二章 Vue快速入门--7 讲解v-cloak、v-text、v-html的基本使用

    7 讲解v-cloak.v-text.v-html的基本使用 <!DOCTYPE html> <html lang="en"> <head> & ...

  2. 第二章 Vue快速入门-- 28 自定义按键修饰符

    事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. 第二章 Vue快速入门-- 27 字符串的padStart方法使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 第二章 Vue快速入门--14 使用v-model实现计算器的案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. 第二章 Vue快速入门--12 事件修饰符的介绍

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. robots.txt文件

    网站通过一个符合Robots协议的robots.txt文件来告诉搜索引擎哪些页面可以爬取.Robots.txt协议全称“网络爬虫排除标准”.一般情况下,该文件以一行或多行User-agent记录开始, ...

  2. C++学习笔记-STL

    C++ STL (Standard Template Library标准模板库) 是通用类模板和算法的集合,它提供给程序员一些标准的数据结构的实现如 queues(队列), lists(链表), 和 ...

  3. vsphere6.7+Horizon7.8推送桌面遇到的一些问题

    系统环境 esxi6.7+vSphere6+Horizon7.8 VC环境为windows server 2016 standard 问题描述 vc安装 链接外部数据库找不到DSN 安装view co ...

  4. Oracle-DQL 1- select基础

    说明:语句中说到的“表”,以及表中有哪些“列”自行脑补......重要的是理解概念,能看懂语句代表的含义就可以了~ DQL-数据查询语句: 1.* 表示所有列SELECT * FROM emp; 2. ...

  5. 关于Oracle MAX()KEEP(DENSE_RANK LAST/FIRST ORDER BY ) 函数的使用分析

    MAX()/MIN() KEEP(DENSE_RANK LAST/FIRST) 函数 解释: 1. max()  获取最大值: 2.min() 获取最小值; 3. keep 保持满足括号内条件的内容; ...

  6. 安装oracle数据库11g及问题解决

    安装步骤可借鉴https://www.cnblogs.com/qfb620/p/4577255.html 1.安装后发现用Navicat无法连接数据库显示报错ORA-28547:connection ...

  7. [转载]Python 魔法方法详解

    据说,Python 的对象天生拥有一些神奇的方法,它们总被双下划线所包围,他们是面向对象的 Python 的一切. 他们是可以给你的类增加魔力的特殊方法,如果你的对象实现(重载)了这些方法中的某一个, ...

  8. .Net高级工程师面试题

    ----------高级开发工程师岗位职责: 1.完成平台系统新功能模块开发,维护现有产品,独立地设计.开发.实现和测试关键系统: 2.负责公司项目核心代码的编写: 3.根据产品需求进行业务功能的开发 ...

  9. Java异常模块

    JAVA异常的捕获与处理 视频链接:https://edu.aliyun.com/lesson_1011_8939#_8939 java语言提供最为强大的支持就在于异常的处理操作上. 1,认识异常对程 ...

  10. 【原创】大数据基础之ETL vs ELT or DataWarehouse vs DataLake

    ETL ETL is an abbreviation of Extract, Transform and Load. In this process, an ETL tool extracts the ...