<!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. 【miscellaneous】IP多播技术及其编程

    标  题: IP多播技术及其编程 发信站: 幽幽黄桷兰 (Mon Jun 16 10:35:39 2003) 转信站: SMTH!maily.cic.tsinghua.edu.cn!news2.ues ...

  2. 【转帖】Linux的桌面环境gnome、kde、xfce、lxde 等等使用比较

    Linux的桌面环境gnome.kde.xfce.lxde 等等使用比较 https://www.cnblogs.com/chenmingjun/p/8506995.html 文章目录 图形界面架起用 ...

  3. SQL Server 下载与安装

    1.首先去Microsoft官网下载对应的安装程序,下载地址:https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.运行安 ...

  4. 小菜鸟之HTML常用

    html的基本结构是什么? 表示段落标签是什么?<p> 表示标题标签的是什么?<title>Css标签样式</title> 表示区域标签的是什么?<div&g ...

  5. mysql 常见问题整理

    一 coalesce 在mysql中,其实有不少方法和函数是很有用的,这次介绍一个叫coalesce的,拼写十分麻烦,但其实作用是将返回传入的参数中第一个非null的值,比如 SELECT COALE ...

  6. php 一些常用函数

    1.var_export() var_export — 输出或返回一个变量的字符串表示此函数返回关于传递给该函数的变量的结构信息,它和 var_dump() 类似,不同的是其返回的表示是合法的 PHP ...

  7. poj 1064 求解最大化问题

    对于二分而言,如果判断条件比较简单的话,在求解最大化或者最小化问题的时候就比较适用但是这道题目吖的卡精度.. #include<cstdio> #include<iostream&g ...

  8. NSIS逻辑函数头文件介绍

    !include "LogicLib.nsh"使用 NSIS 的宏来提供各种逻辑基本语句,不需要预先添加函数. 基本语句 If|Unless..{ElseIf|ElseUnless ...

  9. eclipse中ctrl+1什么意思

    eclipse中ctrl+1是一个快捷键,能快速的现实光标所在行的问题,并给出一些修改方案. 当eclipse编辑器在你编辑代码阶段,能检测到编辑时异常(错误)会在错误代码行前面出现一个红色的叉叉,这 ...

  10. nginx php-fpm环境搭建权限问题

    如果nginx的work process和php-fpm的运行权限相同,在logrotate的影响下,会导致被上传webshell后 被修改accesslog 故安全配置: nginx.conf: u ...