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>