<!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. Git速成学习第一课：创建版本库与版本回退

    Git速成学习笔记整理于廖雪峰老师的官网网站:https://www.liaoxuefeng.com/ 我太困了0.0精神点再写...... /*我来啦!以后会陆续更新自己的学习笔记*/ Git是分布 ...

  2. vue中使用raphael.js实现地图绘制

    一.效果图 二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 <template> <div> &l ...

  3. 14.Sqoop把数据从HDFS导出到mysql

    创建数据文件 ,gopal,manager,,TP ,manisha,preader,,TP ,kalil,php dev,,AC ,prasanth,php dev,,AC ,kranthi,adm ...

  4. double write 双写

    Oracle 8KB Postgresql 8KB MySQL Innodb 16KB buffer page block首先,要DML数据,需要先把page读取到index page中,之后对内存中 ...

  5. print格式化输出(format)

    一. print格式化输出,以及使用format控制 字符串的格式化方法分为两种,分别为占位符(%)和format方式.占位符方式在Python2.x中用的比较广泛,随着Python3.x的使用越来越 ...

  6. oracle按用户导出导入表

    查看备份目录:select * from dba_directories where directory_name='DATA_PUMP_DIR'; 导入导出的文件名默认都是以备份目录为相对路径. 按 ...

  7. 解决radiobutton在gridview中无法单选的一种方法

    最近在项目中有个单选gridview中某一项的需求,使用radiobutton后发现,虽然最终选择出来的是一项,但是在页面上却可以选择多项,经过查看生成的html代码,发现生成的radio的name属 ...

  8. Visual Studio 2012网站如何只生成一个DLL文件

    简介: 在Visual Studio 2005,2008,2010版本中,都有Web Deployment工具将网站进行发布,所有代码文件和库文件发布,生成为一个动态链接库文件,而在Visual St ...

  9. 移动端真机debug调试神器 vConsole学习（一）之基础

    参考 使用方法 移动端真机debug调试神器 vConsole的引入说明(原生态与WebPack) 移动端使用vconsole调试console vConsole ——开源的前端 console 调试 ...

  10. React学习——通过模态框中的表单，学习父子组件之间传值

    import { Button, Modal, Form, Input, Radio } from 'antd'; const CollectionCreateForm = Form.create({ ...