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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <title>Document</title>
 8     <!--1.导入Vue的包-->
 9     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
10   </head>
11
12   <body>
13     <div id="app">
14         <h4>{{msg}}</h4>
15         <!-- v-bind只能实现数据的单向绑定,从M 自动绑定到 V,无法实现数据的双向绑定 -->
16         <!-- <input type="text" v-bind:value="msg" style="width: 100%"> -->
17
18         <!-- 使用 v-model 指令,可以实现 表单元素 和 Model 中数据的双向数据绑定 -->
19         <!-- 注意:v-model 只能运用在 表单元素中 -->
20         <!-- 常见的表单元素: input(radio,text,address,email......)  select  checkbox  textarea -->
21         <input type="text" value="msg" style="width: 100%;" v-model="msg">
22     </div>
23
24
25     <script>
26        // 创建 Vue 实例,得到 ViewModel
27       var vm =  new Vue({
28         el:‘#app‘,
29         data:{
30           msg:‘大家都是好学生,爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!‘
31         },
32         methods:{}
33       });
34     </script>
35   </body>
36 </html>

原文地址:https://www.cnblogs.com/songsongblue/p/10987704.html

时间: 2024-10-07 08:07:10

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

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

7 讲解v-cloak.v-text.v-html的基本使用 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <tit

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

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

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

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

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

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

第二章 Vue快速入门--8 v-bind指令的学习

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

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

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

MPLS VPN 快速入门(张洋讲解版)

MPLS VPN 快速入门(张洋讲解版) 课程目标: 本课程所描述MPLS VPN从零开始学习的内容,为后面MPLS VPN设计和规划的高级教程打下坚实的基础,本课核心目标是:一.从真正意义上去理解MPLS的工作原理:二.学习MPLS VPN架构的基本组件,包括VRF.VPN.RD.RT.BGP标签.MP-BGP:三.融合几大组件从而真正意义的学习基本的MPLS VPN的基本架构. 课程位置:http://edu.51cto.com/course/course_id-5556.html 第一课:

【第2章 Spring快速入门】2.2 WEB应用之HelloWorld

上一节:[第2章 Spring快速入门]2.1 Java应用之HelloWorld 本章节主要介绍在WEB开发过程中,Spring是怎么使用的?上一节中我们已经讲到在普通的Java Project中如何使用Spring容器了,那么在WEB开发中集成Spring时,Spring又应该与Web容器是如何集成使用的呢?本章会着重介绍WEB与Spring的集成使用,同时提供一个简单的Web Demo,供大家快速入手学习.本章主要讲解内容:1. Web开发中如何集成Spring:2. Spring MVC