<!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. 可视化，matplotlib，seaborn，plotly，pyecharts等等

    画频率直方图 import pandas as pd import matplotlib.pyplot as plt Series.value_counts().plot.bar() plt.show ...

  2. CF792E Colored Balls【思维】

    题目传送门 考试的时候又想到了小凯的疑惑,真是中毒不浅... 设每一个数都可以被分成若干个$k$和$k+1$的和.数$x$能够被分成若干个$k$和$k+1$的和的充要条件是:$x%k<=floo ...

  3. ERNIE学习笔记

    https://ai.baidu.com/forum/topic/show/954092 学习ERNIE的输入部分 输入 一共有五个部分组成,每个部分之间用分号;隔开: · token_ids:输入句 ...

  4. mysql数据库之视图、触发器

    视图 概念:通过查询得到的一张虚拟表,然后保存下来就是视图 视图的好处:如果要频繁使用某张虚拟表,那么就可以保存为视图,以后查找就直接拿这个视图就会非常方便 视图语法规则: create view t ...

  5. VMware中centos虚拟机的安装

    几个月前,就下载了VMware,centOS 6 操作系统镜像.苦于对linux的不理解和安装教程的不熟悉,一直未安装成功. 几天前,终于独自安装好了,特此记录一下. 安装其实很简单,之前失败是在于安 ...

  6. A New 3-bit Programming Algorithm using SLC-to-TLC Migration for 8MBs High Performance TLC NAND Flash Memory

    背景 1.2012年左右的数据SLC.MLC.TLC闪存芯片的区别:SLC = Single-Level Cell ,即1bit/cell,速度快寿命长,价格超贵(约MLC 3倍以上的价格),约10万 ...

  7. Thinkphp 使用小结

    分页中带查询参数 ...->paginate(15,false,['query'=>request()->param()]); 队列后台自动开启运行 nohup php think ...

  8. python-Re模块用法

    主要函数:match().search().compile() re.compile compile 函数用于编译正则表达式,生成一个正则表达式( Pattern )对象,供 match() 和 se ...

  9. Dom编程-左侧菜单栏设计模型实现

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

  10. C# 不用添加WebService引用，调用WebService方法

    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行. [System.Web.Script.Services.ScriptService] 使用HttpWeb ...