计算机网络/计算机科学与应用/系统/运维/开发

Vue基础指令(下)

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>


vue

只要认真对待生活,终有一天,你的每一份努力,都将绚烂成花。

评论

^