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

最新推荐文章于 2021-06-02 20:33:00 发布

weixin_30448603

最新推荐文章于 2021-06-02 20:33:00 发布

阅读量79

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/songsongblue/p/10987704.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     <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

weixin_30448603

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二章 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....
复制链接

扫一扫