vue--监听属性完成大小写字母间的转换

     <script type="text/javascript">

        window.onload = function(){

            var app = new Vue({

                el:"#app",

                data:{

                upp:0,

                low:0

            },

            watch:{

                upp:function(val){

                this.upp = val;

                this.low = val.toLowerCase();

            },

                low:function(val){     

                this.low = val;

                this.upp = val.toUpperCase();

            }

          }

         });

     

        }

     

       </script>

 

vue代码至此就全都写完了，下面要html出场啦！

   <div id="app">

                大写：<input type="text" v-model = "upp" />

               

                小写：<input type="text" v-model = "low"/>

   </div>

 

 

运行效果图：