zoukankan      html  css  js  c++  java
  • 黑马vue---14、v-model双向绑定

    黑马vue---14、v-model双向绑定

    一、总结

    一句话总结:

    1、v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定
    2、v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定

    1、v-model的使用限制?

    v-model 只能运用在 表单元素中:input(radio, text, address, email....)   select    checkbox   textarea

    2、v-model使用实例?

    input type="text" style="100%;" v-model="msg"

    二、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   <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8   <title>Document</title>
     9   <script src="./lib/vue-2.4.0.js"></script>
    10 </head>
    11 
    12 <body>
    13   <div id="app">
    14     <h4>{{ msg }}</h4>
    15 
    16     <!-- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定  -->
    17     <!-- <input type="text" v-bind:value="msg" style="100%;"> -->
    18 
    19     <!-- 使用  v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定 -->
    20     <!-- 注意: v-model 只能运用在 表单元素中 -->
    21     <!-- input(radio, text, address, email....)   select    checkbox   textarea   -->
    22     <input type="text" style="100%;" v-model="msg">
    23   </div>
    24 
    25   <script>
    26     // 创建 Vue 实例,得到 ViewModel
    27     var vm = new Vue({
    28       el: '#app',
    29       data: {
    30         msg: '大家都是好学生,爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!'
    31       },
    32       methods: {
    33       }
    34     });
    35   </script>
    36 </body>
    37 
    38 </html>
     
  • 相关阅读:
    Entity SQL 初入
    ObjectQuery查询及方法
    Entity Framework 的事务 DbTransaction
    Construct Binary Tree from Preorder and Inorder Traversal
    Reverse Linked List
    Best Time to Buy and Sell Stock
    Remove Duplicates from Sorted Array II
    Reverse Integer
    Implement Stack using Queues
    C++中const限定符的应用
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/11618822.html
Copyright © 2011-2022 走看看