LLEARNING NOTES

技术 · 思考 · 实践 · 成长

首页/前端/正文

Vue基础指令(下)

前端761 次阅读

vue.js 提供了v-model 用于在表单类元素上进行双向数据绑定。


例如在输入框上使用时,输入内容会实时隐射绑定的数据上。


v-model数据双向绑定:


<div id="app">     <input type="text" v-model="message" placeholder="输入...">     <p>输入的内容是:{{ message }}</p> </div> <script>  var app = new Vue({      el:'#app',      data:{          message:''      }  }) </script>



v-model文本域:


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



@input 实时输出内容:


<div id="app">     <input type="text" @input="handleInput" placeholder="输入...">     <p>输入的内容是:</p>     <p style="white-space:pre">{{ message }}</p> </div> <script>  var app = new Vue({      el:'#app',      data:{          message:''      },      methods:{          handleInput:function(e){              this.message = e.target.value;          }      }  }) </script>


无才无以立足,不苦不能成才。

评论交流

理性讨论,共同进步
验证码

相关文章

继续阅读