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

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

生活的强者,不是指能搞定一切困难,也不是指没有恐惧,而是就算心里藏着无尽的疲惫和委屈,还是会认真地做好手头上的事情;就算自己被生活锤得心灰意冷,还是会尽心尽力地负起责任;就算发现现实与理想的差距有十万里,虽然鞭长莫及,却依然马不停蹄。

评论

^