v-model实现数据的双向绑定

阳光穿透心脏的1/2处 2023-10-18 08:58 17阅读 0赞

Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，

比如，在数据框上使用时，输入的内容会实时映射到绑定的数据上。

<div id="app">
      <input type="text" v-model="message" placeholder="输入你的内容">
     <p>输入的内容是：{
       {message}}</p>
    
      </div>
    
    <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
     var app = new Vue({
         el:'#app',
         data:{
             message:''
         }
     })
    </script>

![Image 1][]

![70][]

对于文本域textarea也是同样的用法：

<div id="app1">
     <textarea v-model="text" placeholder="请输入你的内容"></textarea>
     <p>输入的内容是：</p>
     <p style="white-space:pre">{
       {text}}</p>
      </div>
    
     var app1 = new Vue({
         el:'#app1',
         data:{
            text:''
         }
     })

![70 1][]

完整代码：

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Vue V-model实现双向绑定的基本用法</title>
     </head>
     <body>
      <div id="app">
      <input type="text" v-model="message" placeholder="输入你的内容">
     <p>输入的内容是：{
       {message}}</p>
      </div>
      <div id="app1">
     <textarea v-model="text" placeholder="请输入你的内容"></textarea>
     <p>输入的内容是：</p>
     <p style="white-space:pre">{
       {text}}</p>
      </div>
    
    <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
     var app = new Vue({
         el:'#app',
         data:{
             message:''
         }
     })
     var app1 = new Vue({
         el:'#app1',
         data:{
            text:''
         }
     })
    </script>
     </body>
    </html>

[Image 1]: 
[70]: https://img-blog.csdn.net/20180919170645246?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180919170700420?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70