zoukankan      html  css  js  c++  java
  • VUE课程---13、双向数据绑定v-model

    VUE课程---13、双向数据绑定v-model

    一、总结

    一句话总结:

    vue中,v-model指令可以做双向绑定,也就是M(model)和V(view)的双向绑定
    <div id="app">
        <input type="text" v-model="msg2">
    <!--    <input type="text" v-bind:value="msg2">-->
        <div>{{msg2}}</div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg2:'这是vue的双向数据绑定的实例'
            }
        });
    </script>

    1、双向数据绑定指令v-model 注意?

    1、vue中能做双向绑定的指令只有一个v-model
    2、双向绑定指令v-model只能运用到表单元素上,例如input、textarea、select等

    二、双向数据绑定v-model

    博客对应课程的视频位置:13、双向数据绑定v-model
    https://www.fanrenyi.com/video/26/230

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>双向数据绑定v-model</title>
     6 </head>
     7 <body>
     8 <!--
     9 
    10 双向绑定注意
    11 1、vue中能做双向绑定的指令只有一个v-model
    12 2、双向绑定指令v-model只能运用到表单元素上,例如input、textarea、select等
    13 
    14 -->
    15 <div id="app">
    16     <input type="text" v-model="msg2">
    17 <!--    <input type="text" v-bind:value="msg2">-->
    18     <div>{{msg2}}</div>
    19 </div>
    20 <script src="../js/vue.js"></script>
    21 <script>
    22     new Vue({
    23         el:'#app',
    24         data:{
    25             msg2:'这是vue的双向数据绑定的实例'
    26         }
    27     });
    28 </script>
    29 
    30 </body>
    31 </html>

     
  • 相关阅读:
    +-字符串
    心急的C小加
    明明的随机数
    最大公约数和最小公倍数
    独木舟上的旅行
    背包问题
    喷水装置
    奇数魔方
    栈的应用
    c链表结点的删除和添加
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12886164.html
Copyright © 2011-2022 走看看